1.4.3 • Published 4 years ago

@opuscapita/react-notifications v1.4.3

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

React Notifications

This is a fork with fixed Object.assign for compatibility with IE11

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

NameTypeDefaultRequired
enterTimeoutnumber400false
leaveTimeoutnumber400false

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);
NameTypeDescription
messagestringThe message string
titlestringThe title string
timeOutintegerThe popup timeout in milliseconds
callbackfunctionA function that gets fired when the popup is clicked
prioritybooleanIf true, the message gets inserted at the top

Example

View demo or example folder.