Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
react-notifications
Advanced tools
npm install --save react-notifications
Use only one 'NotificationContainer' component in the app.
import 'react-notifications/lib/notifications.css';
<link rel="stylesheet" type="text/css" href="path/to/notifications.css">
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;
<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;
Name | Type | Default | Required |
---|---|---|---|
enterTimeout | number | 400 | false |
leaveTimeout | number | 400 | false |
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 |
View demo or example folder.
When contributing to this reposity, please first open an issue and discuss intended changes with maintainers. If there is already an issue open for the feature you are looking to develop, please just coordinate with maintainers before assigning issue to yourself.
master
is the main branch from which we publish packages. next
is the branch from which we will publish the next release. All issue
branches should be branched from master
, unless specifically told by the maintainers to use a different branch. All pull requests should be submitted to merge with next
in order to make the next release.
next
.next
.You can add as many commits to your PR as you would like. All commits will be squashed into a single commit when merging PR.
FAQs
Notification component for ReactJS
The npm package react-notifications receives a total of 25,133 weekly downloads. As such, react-notifications popularity was classified as popular.
We found that react-notifications demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.