react-redux-notifications
Say you have a form with an API call and when the form submit succeeds you want to show the user a success message, or in the event of a failure, show them a failure message.
React-redux-notifications is a redux middleware powered notification system which makes this super easy in a decoupled way.
Setup
// Reducer setup const todoApp = // Middleware setup let store = // To use a different key to middleware const todoApp = const NotificationMiddleware = let store = <InlineNotification message='Api call successful!' triggeredBy=API_CALL_SUCCESS reduxKey="myCustomKey" />
Example usage
<InlineNotification message='Api call successful!' triggeredBy=API_CALL_SUCCESS showDismiss /> <InlineNotification defaultMessage='Api call successful!' triggeredBy=DIFFERENT_API_CALL_SUCCESS hideAfter=500 />
API
InlineNotification component
triggeredBy
- either string or array of strings defining which redux event(s) to listen fordefaultMessage
- The fallback message to render.notificationMessage
on the triggering event type will take precidenthideAfter
- Hide notification after specified number of msshowDismiss
- Show the default dismiss buttonrenderDismiss
- Override the rendering of the dismiss button (this has no effect when renderNotification is specified, as dismiss is part of the notification)renderNotification
- Override rendering each notificationfunction(notification) { return <div key={notification.key}>{notification.message}</div> }
renderContainer
- Override the container renderfunction(notifications) { return <div id='notificationContainer'>{notifications}</div> }
notifications
are the rendered components, you need to specify renderContainer and renderNotification separately
reduxKey
- If not using the defaultnotifications
key for redux, your key can be specified here
notification
The notification object which is passed to renderNotification
key: '<unique key used as react component key>' message: '<notificationMessage || defaultMessage>' trigger: '<redux event which triggered the notification>'
License
react-redux-notifications is available under MIT. See LICENSE for more details.