https://github.com/nicmesan/react-redux-notification
The simplest way to implement a notification system in your React-Redux app
https://github.com/nicmesan/react-redux-notification
notifications notifications-component react redux
Last synced: 5 months ago
JSON representation
The simplest way to implement a notification system in your React-Redux app
- Host: GitHub
- URL: https://github.com/nicmesan/react-redux-notification
- Owner: nicmesan
- License: mit
- Created: 2016-11-28T17:23:27.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-04T18:44:03.000Z (over 9 years ago)
- Last Synced: 2025-08-25T15:06:31.980Z (9 months ago)
- Topics: notifications, notifications-component, react, redux
- Language: JavaScript
- Homepage:
- Size: 15.6 KB
- Stars: 26
- Watchers: 1
- Forks: 22
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```js
import 'react-redux-notification/src/styles/notifications.css';
```
#### Other
```html
```
### Middleware
```js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './my_app';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import {notificationsMiddleware} from 'react-redux-notification'
import rootReducer from './my_reducer';
const store = createStore(
rootReducer,
applyMiddleware(notificationsMiddleware),
);
ReactDOM.render(
, document.querySelector('.container'));
```
### Reducer
```js
import { combineReducers } from 'redux';
import { notificationsReducer } from '../src'
const rootReducer = combineReducers({
notificationsReducer,
});
export default rootReducer;
```
# Using the library
### Notifications container
First, add the notifications container in your main component:
```js
import React, { Component } from 'react';
import { Notifications } from 'react-redux-notification'
class MainComponent extends Component {
render () {
return (
//.....
)
}
//...
```
## 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:
```js
import React, { Component } from 'react';
import { Notifications } from 'react-redux-notification';
import { addNotification } from 'react-redux-notification/actions';
class MainComponent extends Component {
addNotification () {
const notificationPayload = {
text: 'A notification Message',
};
this.props.addNotification(notificationPayload)
}
render () {
return (
)
}
//...
```
Or just add the notifiaction key to any other action you are dispatching, and the library middleware will take care of the rest:
```js
// Some random action in your app
exports function doSomeStuff () {
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:
```js
import React, { Component } from 'react';
import { Notifications } from 'react-redux-notification';
import { clearAllNotifications } from 'react-redux-notification/actions';
class MainComponent extends Component {
clearAllNotifications () {
this.props.clearAllNotifications()
}
render () {
return (
)
}
//...
```
### Demo
Check the demo folder for an example