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.