A complete and totally customizable component for notifications in React

by React

React Notification System

A complete and totally customizable component for notifications in React.

View demo Download Source

Installing

This component is available as CommonJS and UMD module. Install via NPM running:

npm install react-notification-system

Important

For React ^0.14.x or React ^15.x.x, use version 0.2.x:

npm install react-notification-system@0.2.x

For React 0.13.x, use version 0.1.x:

npm install react-notification-system@0.1.x

Using

For optimal appearance, this component must be rendered on a top level HTML element in your application to avoid position conflicts.

Here is a basic example. For a more advanced usage, please see the example code.

var React = require('react');
var ReactDOM = require('react-dom');
var NotificationSystem = require('react-notification-system');

var MyComponent = React.createClass({
  _notificationSystem: null,

  _addNotification: function(event) {
    event.preventDefault();
    this._notificationSystem.addNotification({
      message: 'Notification message',
      level: 'success'
    });
  },

  componentDidMount: function() {
    this._notificationSystem = this.refs.notificationSystem;
  },

  render: function() {
    return (
      <div>
        <button onClick={this._addNotification}>Add notification</button>
        <NotificationSystem ref="notificationSystem" />
      </div>
      );
  }
});

ReactDOM.render(
  React.createElement(MyComponent),
  document.getElementById('app')
);

Methods

addNotification(notification)

Add a notification object. This displays the notification based on the object you passed.

Returns the notification object to be used to programmatically dismiss a notification.

removeNotification(notification)

Remove a notification programmatically. You can pass an object returned by addNotification() or by onAdd() callback. If passing an object, you need to make sure it must contain the uid property. You can pass only the uid too: removeNotification(uid).

editNotification(notification)

Edit a notification programmatically. You can pass an object previously returned by addNotification() or by onAdd() callback. If passing an object, you need to make sure it must contain the uid property. You can pass only the uid too: editNotification(uid).

clearNotifications()

Removes ALL notifications programatically.

GitHub