react-light-notifications v1.0.6

react-light-notifications

💡 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

The following options are only available on custom type:

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');
  }
});