Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/khuong291/react-notification
🚀A complete and totally customizable component for notifications in React. https://khuong291.github.io/react-notification/
https://github.com/khuong291/react-notification
alert javascript notification npm-package popup push-notifications react reactjs
Last synced: 23 days ago
JSON representation
🚀A complete and totally customizable component for notifications in React. https://khuong291.github.io/react-notification/
- Host: GitHub
- URL: https://github.com/khuong291/react-notification
- Owner: khuong291
- License: mit
- Created: 2018-06-20T03:23:00.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-09-09T05:23:36.000Z (almost 6 years ago)
- Last Synced: 2024-05-31T17:20:18.469Z (about 1 month ago)
- Topics: alert, javascript, notification, npm-package, popup, push-notifications, react, reactjs
- Language: JavaScript
- Homepage:
- Size: 806 KB
- Stars: 12
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-stars - react-notification - notification/ | khuong291 | 12 | (JavaScript)
README
# react-notification
[](http://badge.fury.io/js/react-notification-popup) [](https://www.npmjs.com/package/react-notification-popup) [](https://david-dm.org/igorprado/react-notification-popup) [](https://david-dm.org/igorprado/react-notification-popup#info=devDependencies) [](https://travis-ci.org/igorprado/react-notification-popup) [](https://coveralls.io/github/igorprado/react-notification-popup?branch=master)
A complete and totally customizable component for notifications in React
## Advanced notification system specification
- You can request a notification to be displayed.
- You can request a notification to hide.
- A notification should not be displayed more than 5 seconds.
- Multiple notifications can be displayed at the same time.
- No more than 3 notifications can be displayed at the same time.
- If a notification is requested while there are already 3 displayed notifications, then queue/postpone it.
## Installing
```
npm install react-notification-popup
```
## Contributing
1. Fork project
2. Checkout **master** branch
3. Create **Feature** branch off of the **master** branch
4. Create awesome feature/enhancement/bug-fix
5. Optionally create _Issue_ to discuss feature
6. Submit pull request from your **Feature** branch to react-notification's **master** branch
## Using
```js
import React from "react";
import { render } from "react-dom";
import { notification, NotificationContainer } from "react-notification-popup";
notification.config = {
maxNotifications: 3,
notificationDisplayTime: 5000
};
const App = () => (
{
notification.emit(
{
providerURL:
"http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/finder-icon.png",
title: "Disk Not Ejected Properly",
description:
"Eject Time Machine before disconnecting or turning it off"
},
{
onClick: () => console.log("Click!!"),
onClose: () => console.log("Close!!")
}
);
}}
>
show
{
notification.dismissAll();
}}
>
dismissAll
);
render(, document.getElementById("root"));
```
## Methods
```js
config: ({ maxNotifications, notificationDisplayTime });
```
Configure notification. This is optional. The default maxNotifications is 3 and notificationDisplayTime is 5s.
```js
emit: (
{
providerURL,
title,
description,
closeButtonText = "Close",
hasCloseButton = true,
autoClose = true
},
{ onClick = noop, onClose = noop }
)
```
Emit notification with some informations and callback handler.
```js
dismissAll: onDismiss = noop;
```
Removes ALL notifications programatically.
## Author
[Khuong Pham](https://khuong291.github.io/home/)
## License
react-notification-popup is released under the MIT license.
See LICENSE for details.