Skip to content
📮 A React & Redux notifications system
JavaScript Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
.travis
build test: Remove Karma related packages (#194) Sep 22, 2019
demo
docs update API doc Jan 3, 2018
scripts tests: freeze react version to 16.8.6 for react 16 related tests Sep 22, 2019
src chore(deps): update dependency eslint-config-standard to v14 (#187) Sep 23, 2019
test chore: remove @babel/polyfill dependency (#203) Sep 29, 2019
.babelrc fix(dips): update all babel-related dependencies (#154) Jun 15, 2019
.eslintignore update eslintignore Jul 1, 2016
.eslintrc chore(deps): update dependency eslint-config-standard to v14 (#187) Sep 23, 2019
.gitignore
.npmignore
.travis.yml
LICENSE
README.md chore: remove @babel/polyfill dependency (#203) Sep 29, 2019
jest.config.js
package-lock.json chore(deps): update dependency eslint-plugin-react to v7.17.0 (#228) Dec 1, 2019
package.json chore(deps): update dependency eslint-plugin-react to v7.17.0 (#228) Dec 1, 2019
renovate.json ci(renovate): configure Renovate (#88) May 26, 2019

README.md

Reapop

npm version npm dependencies npm dev dependencies npm download/month travis build status coveralls status gitter chat

A React and Redux notifications system

Summary

Compatibility

Supported libraries

Tested and works with :

  • react : ^0.14.0, ^15.0.0 and ^16.0.0
  • react-redux : ^3.0.0, ^4.0.0, ^5.0.0 and ^7.0.0
  • redux : ^2.0.0, ^3.0.0 and ^4.0.0

Supported browsers

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
IE10, IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

Demo

Check out the demo

Installation

npm install reapop --save

Integration

Follow these 3 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
}), {});

Usage

In a React component

If you are not familiar with react-redux library or the way to connect a React component with a Redux store, I recommend you to read Redux documentation - Usage with React to understand this example.

import React, {Component} from 'react';
import {connect} from 'react-redux';
// 1. we import `notify` (thunk action creator)
import {notify} from 'reapop';

class AmazingComponent extends Component {
  constructor(props) {
    super(props);
    // 4. don't forget to bind method
    this._onClick = this._onClick.bind(this);
  }

  _onClick() {
    const {notify} = this.props;
    // 3. we use `notify` to create a notification
    notify({
      title: 'Welcome',
      message: 'you clicked on the button',
      status: 'success',
      dismissible: true,
      dismissAfter: 3000
    });
  }

  render() {
    return (
      <div>
        // 5. we notify user when he click on the button
        <button onClick={this._onClick}>Add a notification</button>
      </div>
    );
  }
}
// 2. we map dispatch to props `notify` async action creator
//    here we use a shortcut instead of passing a `mapDispathToProps` function
export default connect(null, {notify})(AmazingComponent);

In a Redux async action creator

If you are not familiar with async actions creator, I recommend you to read Redux documentation - Async actions to understand this example.

// 1. we import `notify` (thunk action creator)
import {notify} from 'reapop';

// we add a notification to inform user about
// state of his request (success or failure)
const sendResetPasswordLink = (props) => (dispatch) => {
    axios.post('https://api.example.com/users/ask-reset-password', props)
      .then((res) => {
        // 2. we use `dispatch` to notify user.
        // Status code will be converted in an understandable status for the React component
        dispatch(notify({message: res.data.detail, status: res.statusCode}));
      })
      .catch((res) => {
       // 3. same thing here
        dispatch(notify({message: res.data.detail, status: res.statusCode}));
      });
    };
};

API Documentation

Read API documentation to discover all possibilities.

Contributing guide

Read Contributing guide

License

Reapop is under MIT License

You can’t perform that action at this time.