alexdmejias / react-redux-notification

The simplest way to implement a notification system in your React-Redux app

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:

import 'react-redux-notification/src/styles/notifications.css';

Other

<link rel="stylesheet" type="text/css" href="path/to/notifications.css">

Middleware

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(
	<Provider store={store}>
		<App />
	</Provider>
	, document.querySelector('.container'));

Reducer

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:

import React, { Component } from 'react';
import { Notifications } from 'react-redux-notification'

class MainComponent extends Component {
  render () {
    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:

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 (
      <div>
        <button onClick={this.addNotification.bind(this)}
        //.....
        <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 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:

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 (
      <div>
        <button onClick={this.clearAllNotifications.bind(this)}
        //.....
        <Notifications duration={1000}/>
      </div>
    )
}
//...

Demo

Check the demo folder for an example