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.
