Skip to content
Notification component for ReactJS
JavaScript CSS HTML
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.
dist Version 1.4.3 Jun 30, 2017
example Fix example Jun 15, 2017
lib Version 1.4.3 Jun 30, 2017
src Added variables for scss properties for easy override Jun 29, 2017
.babelrc Rebuild Jun 15, 2017
.editorconfig Version 1.4.0 Jun 15, 2017
.eslintignore Version 1.4.0 Jun 15, 2017
.eslintrc Version 1.4.0 Jun 15, 2017
.gitignore Version 1.4.0 Jun 15, 2017
.npmignore Refactor Oct 10, 2015
README.md Update readme Jun 15, 2017
gulpfile.babel.js Version 1.4.0 Jun 15, 2017
package-lock.json Update react transition group Jun 15, 2017
package.json Version 1.4.3 Jun 30, 2017
postcss.config.js Version 1.4.0 Jun 15, 2017
screenshot.png Fix readme Oct 10, 2015
webpack.config.js Remove react-dom from extenals Jun 15, 2017

README.md

React Notifications

Installation

npm install --save react-notifications

Usage

Note

Use only one 'NotificationContainer' component in the app.

CSS

Webpack:

import 'react-notifications/lib/notifications.css';

Other

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

JS

import React from 'react';
import {NotificationContainer, NotificationManager} from 'react-notifications';

class Example extends React.Component {
  createNotification = (type) => {
    return () => {
      switch (type) {
        case 'info':
          NotificationManager.info('Info message');
          break;
        case 'success':
          NotificationManager.success('Success message', 'Title here');
          break;
        case 'warning':
          NotificationManager.warning('Warning message', 'Close after 3000ms', 3000);
          break;
        case 'error':
          NotificationManager.error('Error message', 'Click me!', 5000, () => {
            alert('callback');
          });
          break;
      }
    };
  };

  render() {
    return (
      <div>
        <button className='btn btn-info'
          onClick={this.createNotification('info')}>Info
        </button>
        <hr/>
        <button className='btn btn-success'
          onClick={this.createNotification('success')}>Success
        </button>
        <hr/>
        <button className='btn btn-warning'
          onClick={this.createNotification('warning')}>Warning
        </button>
        <hr/>
        <button className='btn btn-danger'
          onClick={this.createNotification('error')}>Error
        </button>

        <NotificationContainer/>
      </div>
    );
  }
}

export default Example;

UMD

<link rel="stylesheet" type="text/css" href="path/to/react-notifications/dist/react-notifications.css">
<script src="path/to/react-notifications/dist/react-notifications.js"></script>
const NotificationContainer = window.ReactNotifications.NotificationContainer;
const NotificationManager = window.ReactNotifications.NotificationManager;

Example here

NotificationContainer Props

Name Type Default Required
enterTimeout number 400 false
leaveTimeout number 400 false

NotificationManager API

  • NotificationManager.info(message, title, timeOut, callback, priority);
  • NotificationManager.success(message, title, timeOut, callback, priority);
  • NotificationManager.warning(message, title, timeOut, callback, priority);
  • NotificationManager.error(message, title, timeOut, callback, priority);
Name Type Description
message string The message string
title string The title string
timeOut integer The popup timeout in milliseconds
callback function A function that gets fired when the popup is clicked
priority boolean If true, the message gets inserted at the top

Example

View demo or example folder.

You can’t perform that action at this time.