Nth Permutation Mathematics

    snapsheet-react-redux-notifications

    1.1.1 • Public • Published

    snapsheet-react-redux-notifications

    npm version

    Notifications with react and redux

    Usage

    Install:

    npm install snapsheet-react-redux-notifications --save

    Add reducer

    Note you can call your reducer anything, but if you want to set an initial state than you must use a notifications array.

    import { createNotificationReducer } from 'snapsheet-react-redux-notifications';
     
    const rootReducer = {
      notifications: createNotificationReducer(),
      applicationReducer,
      // ...etc
    };

    With initial state:

    import { createNotificationReducer, createNotification } from 'snapsheet-react-redux-notifications';
     
    const rootReducer = {
      notifications: createNotificationReducer({
        notifications: [
          createNotification("WARNING", "You have a warning from the backend on page load!"),
          createNotification("ERROR", "You have an error from the backend on page load!", 5000) // 5 second delay
        ]
      }),
      applicationReducer,
      // ...etc
    };

    Create message component

    Your component will be passed the following props so that you can display the flash messages however you choose.

    • active: whether or not the message is currently dismissed
    • onDismiss: a function to call to dismiss the notification
    • id,
    • message
    • type

    This design enables the notification to temporarily stay in the store for a short time so that you can animate the disappearance of the message. It also makes it simple to use with existing components such as bootstrap's alert. You can use the type to alter the styles, and actions can trigger onDismiss to hide the notification.

    Example:

    function NotificationMessage(props) {
      return (
        <div>
          <div>
            <h3>{props.message}</h3>
            <span>id: {props.id}</span> <span>type: {props.type}</span>
          </div>
          <button onClick={props.onDismiss} type="button">x</button>
        </div>
      );
    }
     
    NotificationMessage.propTypes = {
      active: PropTypes.bool,
      message: PropTypes.string,
      onDismiss: PropTypes.func,
      id: PropTypes.string,
      type: PropTypes.string
    };

    Display notification from the store

    import { Notification } from 'snapsheet-react-redux-notifications';
     
     
    @connect((state, props) => {
      return {
        notifications: state.notifications.notifications
      };
    })
    class App extends Component {
      static propTypes = {
        notifications: PropTypes.array,
        dispatch: PropTypes.func
      };
      render() {
        return (
          <div>
            {
              this.props.notifications.map(notification => {
                return (<Notification dispatch={this.props.dispatch} key={notification.id} notification={notification} MessageComponent={NotificationMessage}/>);
              })
            }
          </div>
        );
      }
    }

    Trigger notifications

    this.props.dispatch(displayNotification("ERROR", "An unexpected error occurred!"));
     
    this.props.dispatch(displayNotification("INFO", "An unexpected error occurred!", 10000));

    Keywords

    none

    Install

    npm i snapsheet-react-redux-notifications

    DownloadsWeekly Downloads

    21

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • snapsheet-tech
    • ankita-tank
    • justin-newman-snapsheet
    • dash-snapsheet
    • elorman
    • mattheyd
    • dakota_larson_snapsheet
    • inomire
    • joe.cormier
    • gsaunsen-snapsheet
    • ericbluhm
    • nicholas.stoffel.snapsheet
    • nberrios-ss
    • mananssh
    • anandrikka
    • tpospisil_ss
    • anvakondak
    • kazuhirouchikata
    • revonok
    • mitesh.shah
    • yujjit
    • chrisdavis178
    • gshetty007snapsheet
    • santi-h
    • carlporter
    • lluchez
    • avedire
    • ifraah
    • abhishek85
    • vanessa.wang
    • whatisdot
    • garciadd
    • jorge-e-toro
    • ojaspatwardhan
    • nathan.gonzalez
    • raphaelshejnberg
    • peterwlanglois
    • deenatenzer
    • roseg
    • jonathanversino-ss
    • rstaudt2
    • ben.richards
    • snapsheetbot
    • drc372
    • petermarathas
    • haden.santefort.snapsheet
    • mpsnap
    • priyankkapadia-snapsheet
    • jdmsnap
    • uttercmsnapsheet
    • rayolivero
    • orenmagid
    • pranav-snap
    • jwydra
    • emilystanish