โ ๏ธ The previous packagere-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.
npm install --save redux-notifications
import { createStore, combineReducers } from 'redux'
import { reducer as notifReducer } from 'redux-notifications';
combineReducers({
notifs: notifReducer,
// ... more reducers here ...
})
import { Provider } from 'react-redux'
import { Notifs } from 'redux-notifications';
<Provider store={store}>
<div>
// ... other things like router ...
<Notifs />
</div>
</Provider>
Thanks to Redux, sending notification is simply done by firing an Action
:
import { reducer as notifReducer, actions as notifActions, Notifs } from 'redux-notifications';
const { notifSend } = notifActions;
class Demo extends React.Component {
send() {
this.props.dispatch(notifSend({
message: 'hello world',
kind: 'info',
dismissAfter: 2000
}));
}
render() {
<button onClick={this.send}>Send Notification</button>
}
}
Watch the demo or checkout its source code
The notification message.
The base className for the Notif component. Can be used to override CSS styles.
The notification kind, can be one of:
info
,success
,warning
,danger
.
Set an ID for the notification. If not set, defaults to Date.now().
Auto dismiss the notification after the given number of milliseconds.
Define the react-transition-group enter timeout is milliseconds.
Define the react-transition-group leave timeout is milliseconds.
Clear all current notifications.
Dismiss a notification by ID
A custom react component can be used instead of the default Notif component
The notification's unique ID
The notification's message
Label for action click
Function when action is clicked. Requires
actionLabel
prop
git clone https://github.com/indexiatech/re-notif.git
cd re-notif
npm install
npm run start
Listening on localhost:3000