react-light-notifications

Travis npm package Coveralls

💡 Note: This project is a modified version of react-notifications.

LIVE DEMO

Installation

yarn add react-light-notifications

or

npm i react-light-notifications

Example

import {
  NotificationContainer,
  NotificationManager
} from "react-light-notifications";
import "react-light-notifications/lib/main.css";

const App = () => (
  <div>
    <button
      onClick={() => {
        NotificationManager.info({
          title: 'Information Title',
          message: 'Information message',
          onClick: () => {
            console.log('Clicked on the notification');
          }
        });
      }}
    >
      Info
    </button>

    <NotificationContainer />
  </div>
);

export default App;

Notification Types

NotificationManager.success({
  title: 'Success Title',
  message: 'Success message'
});

NotificationManager.error({
  title: 'Error Title',
  message: 'Error message'
});

NotificationManager.info({
  title: 'Info Title',
  message: 'Info message'
});

NotificationManager.warning({
  title: 'Warning Title',
  message: 'Warning message'
});

Custom

NotificationManager.custom({
  title: 'Custom Title',
  message: 'Custom message',
  bgColor: 'purple',
  iconClassName: 'custom-icon'
});

Options

Name Type Default
title string null
message string null
showCloseButton bool true
timeOut number 5000
priority bool false
onClick function empty

The following options are only available on custom type:

Name Type Default
bgColor string null
iconClassName string null

Example:

/**
 *
 * @param {object} options
 * @param {string} options.title
 * @param {string} options.message
 * @param {bool} options.showCloseButton
 * @param {bool} options.timeOut
 * @param {bool} options.priority
 * @param {function} options.onClick
 * @param {function} options.bgColor
 * @param {function} options.iconClassName
 */
NotificationManager.custom({
  title: 'Custom Title',
  message: 'Custom message',
  showCloseButton: true,
  timeout:400,
  priority: false,
  bgColor: 'purple',
  iconClassName: 'custom-icon',
  onClick: () => {
    console.log('NOTIFICATION ON CLICK');
  }
});