@pjediny/react-notification
React redux notification
Last updated 2 years ago by pjediny .
MIT · Original npm · Tarball · package.json
$ cnpm install @pjediny/react-notification 
SYNC missed versions from official npm registry.

React redux notification

Komponenta pre vykreslenie flash message. Zdrojom dat je redux.

Instalacia

npm i -S @pjediny/react-notification

Integracia

Reducer

import { notificationReducer } from '@pjediny/react-notification';

const rootReducer = combineReducers({
 notification: notificationReducer
});

export default rootReducer;

Routes

import Notifications from '@pjediny/react-notification';

export class Routes extends Component {
  render() {
    return (
      <div>
        <Notifications />
        <Switch>
          ...
        </Switch>
      </div>
    );
  }
}

export default Routes;

SCSS Importovat SCSS z node_modules/@pjediny/react-notification/src/scss/_notifications.scss

Pouzitie

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { addSuccess, addError, addInfo, addWarning } from '@pjediny/react-notification';
import UserDatatable from './UserDatatable.jsx';

class Datatable extends Component {
  constructor(props) {
    super(props);
    this.createNotification = this.createNotification.bind(this);
  }

  createNotification() {
    this.props.actions.addSuccess('Info message', 'test', 1000);
    this.props.actions.addError('Info message');
    this.props.actions.addInfo('Info message');
    this.props.actions.addWarning('Info message');
  }

  render() {
    return (
      <div className="animated fadeIn">
        <button className="btn btn-info" onClick={this.createNotification}>
          Info
          </button>
        <div className="row">
          <div className="col-lg-12">
            <div className="card">
              <div className="card-header"><i className="fa fa-align-justify"></i>Users</div>
              <div className="card-block">
                <UserDatatable />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators({ addSuccess, addError, addInfo, addWarning }, dispatch)
});

export default connect(null, mapDispatchToProps)(Datatable);

License

MIT

Current Tags

  • 0.0.9                                ...           latest (2 years ago)

9 Versions

  • 0.0.9                                ...           2 years ago
  • 0.0.8                                ...           2 years ago
  • 0.0.7                                ...           2 years ago
  • 0.0.6                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
  • 0.0.3                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 10
Last Day 0
Last Week 9
Last Month 0
Dependencies (8)
Dev Dependencies (21)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |