Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.

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.