🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A React component that creates growl-style corner notification messages for your apps.

Notification React

Documentation

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 May Also Like