Redux state driven notification components for React
npm install 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.
``js
// 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() : _ => _,
),
)
triggeredBy={API_CALL_SUCCESS}
reduxKey="myCustomKey" />
`
`js
triggeredBy={API_CALL_SUCCESS}
showDismiss />
triggeredBy={DIFFERENT_API_CALL_SUCCESS}
hideAfter={500} />
`
- 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 notification function(notification) { return
- renderContainer - Override the container render function(notifications) { return
- 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`js
{
key: ''
message: ''
trigger: ''
}
``_react-redux-notifications_ is available under MIT. See LICENSE for more details.