React-awesome-notifications

A beautiful fully customizable React + Redux notification System built with styled-components

Table of contents

• Demo
• Installation
• Integration
• Usage
• API documentation
• Contributing guide
• License

Demo

Check out the demo

Installation

using npm

npm install react-awesome-notifications --save

using yarn

yarn add react-awesome-notifications

Integration

Follow this 4 steps to integrate react-awesome-notifications 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 'react-awesome-notifications';

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

Apply thunk middleware and add notifications reducer to Redux store

1. Since react-awesome-notifications 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, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import {Provider} from 'react-redux';

import {
  reducer as notificationsReducer,
} from 'react-awesome-notifications';

const reducers = combineReducers({
  // notifications reducer must be 'notifications'
  notifications: notificationsReducer,
  // your reducers
  {...}
});

const store = createStore(reducers, applyMiddleware(thunk));

notice: reducer must be mounted as notifications

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 `addNotification` (thunk action creator)
import { addNotification } from 'react-awesome-notifications';

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

  _onClick() {
    const {addNotification} = this.props;
    // 3. we use `addNotification` to create a notification
    addNotification({
      title: 'Welcome',
      message: 'you clicked on the button',
      level: '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 `addNotification` async action creator
//    here we use a shortcut instead of passing a `mapDispathToProps` function
export default connect(null, {addNotification})(MyComponent);

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 'react-awesome-notifications';

// 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.
        dispatch(notify({message: res.data.detail, level: 'success'}));
      })
      .catch((res) => {
       // 3. same thing here
        dispatch(notify({message: res.data.detail, level: 'error'}));
      });
    };
};

API Documentation

• Objects
  • Notification
  • Notification button
  • ExtendStyles
• Action creators
  • Update or create a notification
  • Create a notification
  • Update a notification
  • Remove a notification
  • Remove all notifications
• Notification system component
• Customize styling

Objects

Notification

Property	Type	Default	Description
id	String or Number		ID of the notification. If not provided during creation, will be generated automatically using the universal id.
title	String		Title of the notification
message	String		Message of the notification
level	String	primary	level of the notification, available options : primary, info, success, warning, error.
position	String	tr	Position of the notification, available options : tc, tl, tr, bc, br, bl.
dismissible	Boolean	true	Define if a notification is dismissible by clicking on it
dismissAfter	Number	5000	Time before the notification disappear (ms). Paused when mouse is hovering the notification. 0: infinite.
closeButton	Boolean	false	Display a close button if it is dismissible
buttons	Array		Array of button objects.
onMounted	Function		Function executed at component lifecycle : componentDidMount
onUnmounted	Function		Function executed at component lifecycle : componentWillUnmount
allowHTML	Boolean	false	Allow HTML in title and message of the notification
extendStyles	Object		add custom styles to the notification see. ExtendStyles.

Notification button

Property	Type	Default	Description
label	String		Title of the button
action	Function		Function executed when user click on it

ExtendStyles

Property	Type	Default	Description
notificationWrapper	String		Add custom styles for the notification wrapper
notificationTitle	String		Add custom styles for the notification title
notificationMessage	String		Add custom styles for the notification message
notificationButtonsContainer	String		Add custom styles for the notification buttons container
notificationButton	String		Add custom styles for the notification button

Action creators

Update or create a notification

Updates a notification if it does exist or creates it. It returns the notification just updated or created. You basically want to use this function all the time to update and create notifications.

Syntax

notify(notification);

Parameters

Parameter	Type	Description
notification	Object	A notification object

Example

// add a notification
let notif = notify({
  title: 'Upload status',
  message: 'Your file is uploading...',
  level: 'info',
  dismissible: false,
  dismissAfter: 0
});

// simulate file upload
setTimeout(function() {
  notif.level = 'success';
  notif.message = 'Your file has been successfully uploaded';
  notif.dismissible = true;
  notif.dismissAfter = 5000;
  // update the notification
  notify(notif);
}, 10000);

Create a notification

Creates a notification and returns it.

Syntax

addNotification(notification);

Parameters

Parameter	Type	Description
notification	Object	A notification object

Example

const notif = addNotification({
  title: 'Welcome on demo!',
  message: 'Hey buddy, here you can see what you can do with it.',
  position: 'br',
  level: 'info',
  dismissAfter: 10000,
  dismissible: false,
  onMounted: function() {
    console.log('hey buddy');
  },
  onUnmounted: function() {
      console.log('cya buddy');
  },
  buttons:[{
    label: 'OK',
    action: () => {
      console.log('i\'m OK too');
    }
  }] 
});
console.log(JSON.stringify(notif));
/*
{
  "id":1463345312016,
  "title":"Welcome on demo!",
  "message":"Hey buddy, here you can see what you can do with it.",
  "position":"br",
  "level":"info",
  "dismissAfter":10000,
  "dismissible":false,
  "buttons":[{
    "label":"OK",
  }]
}
*/

Update a notification

Updates a notification and returns it. If the notification has been removed, it will not display it again.

Syntax

updateNotification(notification);

Parameters

Parameter	Type	Description
notification	Object	A notification object

Example

let notif = addNotification({
  title: 'Upload status',
  message: 'Your file is uploading...',
  level: 'info',
  dismissible: false,
  dismissAfter: 0
});

// simulate file upload
setTimeout(function() {
  notif.level = 'success';
  notif.message = 'Your file has been successfully uploaded';
  notif.dismissible = true;
  notif.dismissAfter = 5000;
  updateNotification(notif);
}, 10000);

Remove a notification

Removes a notification.

Syntax

removeNotification(id);

Parameters

Parameter	Type	Description
id	String or Number	ID of the notification

Remove all notifications

Removes all notifications.

Syntax

removeAllNotifications();

Notifications system component

Property	Type	Default	Description
filter	Function	null	Filter notifications to display. Can be useful to display some notifications with another component, like modal notifications or banner notifications.

Example

<NotificationsSystem 
  filter={notif => notif.style !== 'banner'} 
/>

Customize styling

you can add custom styles using ExtendStyles property . because this package uses styled components for apply styles to the final ui so you can use the power of styled components.

Example usage of the ExtendStyles property

import { notify } from 'react-awesome-notifications';

let not = {
  id: 123,
  title: 'my title',
  message: 'my message',
  buttons: [
    {
      label: 'submit'
    }
  ],
  // custom styles
  extendStyles: {
    // customize styles for the notification wrapper
    // features: & parent placeholder, nesting, nesting classes..., any feature of styled-components
    notificationWrapper: `
      background-color: pink;
      padding: 20px;
      
      .notification-close-btn{
        .close-btn{
          padding: 10px;
          
          &:hover{
            color: red;
          }
        }
      }
    `,
    notificationTitle: ``;
    notificationMessage: ``;
    notificationButtonsContainer: ``;
    notificationButton: ``;
  }
};

Final rendred markup

<div class="notification-wrapper">
        <div className='container'>
          <div className="notification-content">
              <div>
                 {title}
              </div>
              <div>
                 {message}
               </div>
          </div>
          <div className='notification-close-btn'>
             <span className="close-btn">&times;</span>
          </div>
          <div class='notification-button'>
            <span className="btn-text">{button.label}</span>
          </div>
        </div>
</div>

Contributing guide

All kinds of contributions (enhancements, new features, stories, documentation & bugs reporting) are welcome.

Setting up your environment

# clone repository
https://github.com/zakariaharti/react-awesome-notifications.git

cd react-awesome-notifications

# install dependencies

** yarn **
yarn install

** npm **
npm install

# Launch demo at http://localhost:6006
npm start

Here is the list of the available npm scripts :

npm run <script>	Description
start	Launch demo at http://localhost:6006
webpack	Compile and lint code using the development env
lint	Lint javascript files of source folder (src)
test	Run tests with jest
test:coverage	Run tests with jest and generate coverage report (HTML and LCOV)
build	run build for production env
storybook	start storybook server at http://localhost:6006
build-storybook	build stories and generate a static files ready for deployment

Example :

npm run compile

Pull requests

All pull requests must be done on the master branch.

Before a pull request :

• Don't forget to update README or documentation if it's necessary
• Check code status with npm run webpack
• Run tests with npm run test
• If you made styles changes or any changes related to user interfaces, launch demo with npm start to check the result in the browser. Check it on all possible browsers that you have. (Precise the list in the PR)

License

React-awesome-notifications is under MIT License