react-redux-notification
The simplest way to implement a notification system in your React-Redux app
Installation
npm install --save react-redux-notification
Getting started
CSS
Webpack:
;
Other
Middleware
;;;;;; const store = ; ReactDOM;
Reducer
; const rootReducer = ; ;
Using the library
Notifications container
First, add the notifications container in your main component:
; { return <div> //..... <Notifications duration=1000/> </div> }//...
Notification container Props
Name | Type | Default | Required |
---|---|---|---|
duration | number | 3000 | false |
- duration: Time in ms each single notification will be rendered before disappearing
Actions
Adding a single notification
You can add a notification calling the addNotification action:
;;; { const notificationPayload = text: 'A notification Message' ; thisprops } { return <div> <button onClick=thisaddNotification //..... <Notifications duration=1000/> </div> }//...
Or just add the notifiaction key to any other action you are dispatching, and the library middleware will take care of the rest:
// Some random action in your app exports { type: 'doSomeStuff' notification: text: 'Stuff done'
Single notification Props
Name | Type | Default | Required |
---|---|---|---|
message | string | None | true |
className | string | Default styles | false |
unique | boolean | false | false |
type | string | None | false |
- message: Text message to be rendered.
- className: Class name to be applied to this specific notification. The library comes with an error class to render error like notifications.
- unique: If true, it will check if a notification of the same "type" exists and if it does, will replace it instead of stacking it.
- type: Related to the unique props, group related notifications of the same type if you don't want them to stack.
Clearing all notifications
Call clearAllNotifications action to clear all current notifications:
;;; { thisprops } { return <div> <button onClick=thisclearAllNotifications //..... <Notifications duration=1000/> </div> }//...
Demo
Check the demo folder for an example