✔️: Use the use-disposable-list (unstyled) hook that can work with any css framework!
⚠️ 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>
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:
import 'redux-notifications/lib/styles.css';
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>
}
}
The notification message, can be one of:
string
,integer
,element
orarray
containing these types.
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.
Clear all current notifications.
Dismiss a notification by ID
A custom react component can be used instead of the default Notif component
Pass a custom classname to the component.
The base className for each Notif component. Can be used to override CSS styles.
Define the react-transition-group enter timeout is milliseconds.
Define the react-transition-group leave timeout is milliseconds.
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:9000