A React & Redux notifications system

Reapop

A React and Redux notifications system.

npm install reapop --save

Integration

Follow this 4 steps to integrate Reapop to your application.

Integrate NotificationsSystem React component

Render this component at the root of your web application to avoid position conflicts.

import React, {Component} from 'react';
import NotificationsSystem from 'reapop';

class ATopLevelComponent extends Component {
  render() { 
    return (
      <div>
        <NotificationsSystem/>
      </div>
    );
  }
}

Install and set a theme

Reapop works with theme. There is no default theme to avoid useless dependencies if you don't use it. So you have to choose one in the list, and follow guidelines of theme to install it.

After this, pass the theme in NotificationsSystem component props

import React, {Component} from 'react';
import NotificationsSystem from 'reapop';
// 1. import theme
import theme from 'reapop-theme-wybo';
// 
class ATopLevelComponent extends Component {
  render() { 
   // 2. set `theme` prop
    return (
      <div>
        <NotificationsSystem theme={theme}/>
      </div>
    );
  }
}

Apply thunk middleware and add notifications reducer to Redux store

1. Since Reapop use thunk async actions creator, you must apply thunk middleware from redux-thunk to your Redux store. Install it with npm install --save redux-thunk.
2. Add notifications reducer as notifications to your root reducer.

import {createStore, compose, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import {reducer as notificationsReducer} from 'reapop';

// store
const createStoreWithMiddleware = compose(
  applyMiddleware(thunk)
)(createStore);
const store = createStoreWithMiddleware(combineReducers({
    // reducer must be mounted as `notifications` !
    notifications: notificationsReducer()
    // your reducers here
  }), {});

Install and import babel-polyfill package

This package use some ES6 features, to make it compatible in all browsers, you must :

1. Install babel-polyfill package with npm install --save-dev
2. Import babel-polyfill package at the root of your app with import 'babel-polyfill';

GitHub