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
import { reducer as notifications } from 'react-redux-notifications'
 
const todoApp = combineReducers({
    notifications,
    ...restOfMiddleware,
})
 
// Middleware setup
import { middleware as NotificationMiddleware } from 'react-redux-notifications'
 
let store = createStore(
    myAppReducers,
    compose(
        applyMiddleware(ReduxThunk, NotificationMiddleware),
        window.devToolsExtension ? window.devToolsExtension() : _ => _,
    ),
)
 
// To use a different key to middleware
import { createMiddleware } from 'react-redux-notifications'
import { reducer as myCustomKey } from 'react-redux-notifications'
 
const todoApp = combineReducers({
    myCustomKey,
    ...restOfMiddleware,
})
 
const NotificationMiddleware = createMiddleware('myCustomKey')
 
let store = createStore(
    myAppReducers,
    compose(
        applyMiddleware(ReduxThunk, NotificationMiddleware),
        window.devToolsExtension ? window.devToolsExtension() : _ => _,
    ),
)
 
<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 for
• defaultMessage - The fallback message to render. notificationMessage on the triggering event type will take precident
• hideAfter - Hide notification after specified number of ms
• showDismiss - Show the default dismiss button
• renderDismiss - 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 notification function(notification) { return <div key={notification.key}>{notification.message}</div> }
• renderContainer - Override the container render function(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 default notifications 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.