redux-notifications
⚠️ The previous package
re-notif
has been deprecated on NPM and renamed toredux-notifications
. A list of changes can be found in the Changelog. Please update your applications accordingly.
React & Redux based notifications center.
Thanks to Redux, the notification objects are maintained within Redux Store's State and are fired by Actions.
Implementation
1. Installation
npm install --save redux-notifications
redux-notifications
reducer
to Redux.
2. The next thing you need to do is to add the ;
Notifs
component at the root of your app
3. Add the ; <Provider store=store> <div> // ... other things like router ... <Notifs /> </div></Provider>
4. Optionally import default CSS
redux-notifications
uses react-css-transition-group with the following classes:
- .notif-transition-enter
- .notif-transition-enter-active
- .notif-transition-leave
- .notif-transition-leave-active
To import the default stylesheet:
;
Sending notifications
Thanks to Redux, sending notification is simply done by firing an Action
:
;const notifSend = notifActions;Component{thisprops;}{<button onClick=thissend>Send Notification</button>}
Actions
actions.notifSend({config})
config.message : node
[required]
The notification message, can be one of:
string
,integer
,element
orarray
containing these types.
config.kind : string
[optional] [default:'info']
The notification kind, can be one of:
info
,success
,warning
,danger
.
config.id : string
[optional] [default:Date.now()]
Set an ID for the notification. If not set, defaults to Date.now().
config.dismissAfter : integer
[optional] [default:null]
Auto dismiss the notification after the given number of milliseconds.
actions.notifClear()
Clear all current notifications.
actions.notifDismiss(id)
Dismiss a notification by ID
Notifs Component
<Notifs CustomComponent={ReactComponent}/>
CustomComponent : React component
A custom react component can be used instead of the default Notif component
className : string
[optional] [default:null]
Pass a custom classname to the component.
componentClassName : string
[optional] [default:'notif']
The base className for each Notif component. Can be used to override CSS styles.
transitionEnterTimeout : integer
[optional] [default:600]
Define the react-transition-group enter timeout is milliseconds.
transitionLeaveTimeout : integer
[optional] [default:600]
Define the react-transition-group leave timeout is milliseconds.
actionLabel : string
Label for action click
onActionClick : func
Function when action is clicked. Requires
actionLabel
prop
Development
git clone https://github.com/indexiatech/re-notif.git
cd re-notif
npm install
npm run start
Listening on localhost:9000