onio-react-notification

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