Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://louisbarranqueiro.github.io/reapop/
:postbox: A simple and customizable React notifications system
https://louisbarranqueiro.github.io/reapop/
notification notifications react reapop redux redux-notifications toast toasts
Last synced: about 1 month ago
JSON representation
:postbox: A simple and customizable React notifications system
- Host: GitHub
- URL: https://louisbarranqueiro.github.io/reapop/
- Owner: LouisBarranqueiro
- License: mit
- Created: 2016-04-18T14:42:12.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2024-07-07T19:02:00.000Z (6 months ago)
- Last Synced: 2024-10-29T15:11:01.394Z (2 months ago)
- Topics: notification, notifications, react, reapop, redux, redux-notifications, toast, toasts
- Language: TypeScript
- Homepage: https://louisbarranqueiro.github.io/reapop
- Size: 64.5 MB
- Stars: 1,552
- Watchers: 9
- Forks: 78
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- react-frontend-toolkit - Reapop
- react-frontend-toolkit - Reapop
README
# Reapop
[](https://www.npmjs.com/package/reapop) [](https://www.npmjs.com/package/reapop) [](https://codecov.io/gh/LouisBarranqueiro/reapop)
A simple and customizable React notifications system
## Summary
* [Compatibility](#compatibility)
* [Demo](#demo)
* [Installation](#installation)
* [Integration & usage](#integration--usage)
* [With React & Redux](#with-react-and-redux)
* [With React alone](#with-react-alone-react--1680)
* [Documentation](#documentation)
* [License](#license)
## Compatibility
### Supported browsers
| [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera |
| --------- | --------- | --------- | --------- | --------- |
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
## Demo
Check out the [demo](https://louisbarranqueiro.github.io/reapop/).
## Installation
```
npm install reapop --save
```
## Integration & usage
### With React and Redux
1 - Add the notifications reducer to your Redux store.
``` js
import {combineReducers, createStore} from 'redux'
import {reducer as notificationsReducer} from 'reapop'
const rootReducer = combineReducers({
notifications: notificationsReducer(),
... your other reducers
})
const store = createStore(rootReducer)
```
2 - Add the `NotificationsSystem` component to your app. Place this component at the root of your application to avoid position conflicts.
``` jsx
import React from 'react'
import {useDispatch, useSelector} from 'react-redux'
import NotificationsSystem, {atalhoTheme, dismissNotification} from 'reapop'
const ATopLevelComponent = () => {
const dispatch = useDispatch();
// 1. Retrieve the notifications to display.
const notifications = useSelector((state) => state.notifications)
return (
dispatch(dismissNotification(id))}
// 4. Pass a builtIn theme or a custom theme.
theme={atalhoTheme}
/>
)
}
```
3 - Set default notifications attributes
``` js
import {setUpNotifications} from 'reapop'
// run this function when your application starts before creating any notifications
setUpNotifications({
defaultProps: {
position: 'top-right',
dismissible: true
}
})
```
4 - Upsert or dismiss notification from any React components.
``` jsx
import React from 'react'
import {useDispatch} from 'react-redux'
// 1. Retrieve the action to create/update a notification, or any other actions.
import {notify} from 'reapop'
const AComponent = () => {
// 2. Retrieve the function to dispatch an action.
const dispatch = useDispatch()
useEffect(() => {
// 3. Create a notification.
dispatch(notify('Welcome to the documentation', 'info'))
}, [])
return (
...
)
}
```
5 - Upsert or dismiss notification from Redux actions.
``` js
// 1. Retrieve the action to create/update a notification.
import {notify} from 'reapop'
const sendResetPasswordLink = () => (dispatch) => {
axios.post('https://api.example.com/users/ask-reset-password')
// 2. Create a notification.
.then((resp) => dispatch(notify(resp.data.detail, 'success'))
.catch((resp) => dispatch(notify(resp.data.detail, 'error'))
}
}
```
### With React alone (react >= 16.8.0)
1 - Add the `NotificationsProvider` at the root of your application.
It is important that this component wraps all the components
where you want to access the notifications and the actions to manipule notifications.
``` jsx
import React from 'react'
import {NotificationsProvider} from 'reapop'
const ARootComponent = () => {
return (
// ... components
)
}
```
2 - Add the `NotificationsSystem` component to your app. Place this component at the root of your application to avoid position conflicts.
``` jsx
import React from 'react'
import NotificationsSystem, {atalhoTheme, useNotifications} from 'reapop'
const ATopLevelComponent = () => {
// 1. Retrieve the notifications to display, and the function used to dismiss a notification.
const {notifications, dismissNotification} = useNotifications()
return (
dismissNotification(id)}
// 4. Pass a builtIn theme or a custom theme.
theme={atalhoTheme}
/>
)
}
```
3 - Set default notifications attributes
``` js
import {setUpNotifications} from 'reapop'
// run this function when your application starts before creating any notifications
setUpNotifications({
defaultProps: {
position: 'top-right',
dismissible: true
}
})
```
4 - Upsert or dismiss notification from any React components.
``` jsx
import React from 'react'
import {useNotifications} from 'reapop'
const AComponent = () => {
// 1. Retrieve the action to create/update a notification.
const {notify} = useNotifications()
useEffect(() => {
// 2. Create a notification.
notify('Welcome to the documentation', 'info')
}, [])
return (
...
)
}
```
## Documentation
Read the [documentation](https://github.com/LouisBarranqueiro/reapop/blob/master/DOCUMENTATION.md) to learn more and see what you can with it.
## License
Reapop is under [MIT License](https://github.com/LouisBarranqueiro/reapop/blob/master/LICENSE)