Reapop

A simple and customizable React notifications system

NotificationReactRedux
LouisBarranqueiro/reapoplouisbarranqueiro.github.io/reapopreapop

README

Reapop


npm version npm download/month coveralls status

A simple and customizable React notifications system

Summary


Compatibility
Demo
Installation
Integration & usage
    With React & Redux
    With React alone
Documentation
License

Compatibility


Supported browsers


[[[[[
---------------------------------------------
IE10,lastlastlastlast

Demo


Check out the demo.

Installation


  1. ```
  2. npm install reapop --save
  3. ```

Integration & usage


With React and Redux


1 - Add the notifications reducer to your Redux store.

  1. ``` js
  2. import {combineReducers, createStore} from 'redux'
  3. import {reducer as notificationsReducer} from 'reapop'

  5. const rootReducer = combineReducers({
  6.     notifications: notificationsReducer(),
  7.     ... your other reducers
  8. })
  9. const store = createStore(rootReducer)
  10. ```


2 - Add the NotificationsSystem component to your app. Place this component at the root of your application to avoid position conflicts.

  1. ``` jsx
  2. import React from 'react'
  3. import {useDispatch, useSelector} from 'react-redux'
  4. import NotificationsSystem, {atalhoTheme, dismissNotification} from 'reapop'

  6. const ATopLevelComponent = () => {
  7.     const dispatch = useDispatch();
  8.     // 1. Retrieve the notifications to display.
  9.     const notifications = useSelector((state) => state.notifications)
  10.     
  11.     return (
  12.         <div>
  13.             <NotificationsSystem
  14.                 // 2. Pass the notifications you want Reapop to display.
  15.                 notifications={notifications}
  16.                 // 3. Pass the function used to dismiss a notification.
  17.                 dismissNotification={(id) => dispatch(dismissNotification(id))}
  18.                 // 4. Pass a builtIn theme or a custom theme.
  19.                 theme={atalhoTheme}
  20.             />
  21.         </div>
  22.     )
  23. }
  24. ```

3 - Set default notifications attributes

  1. ``` js
  2. import {setUpNotifications} from 'reapop'

  4. // run this function when your application starts before creating any notifications
  5. setUpNotifications({
  6.     defaultProps: {
  7.         position: 'top-right',
  8.         dismissible: true
  9.     }
  10. })
  11. ```

4 - Upsert or dismiss notification from any React components.

  1. ``` jsx
  2. import React from 'react'
  3. import {useDispatch} from 'react-redux'
  4. // 1. Retrieve the action to create/update a notification, or any other actions.
  5. import {notify} from 'reapop'

  7. const AComponent = () => {
  8.     // 2. Retrieve the function to dispatch an action.
  9.     const dispatch = useDispatch()
  10.     useEffect(() => {
  11.         // 3. Create a notification.
  12.         dispatch(notify('Welcome to the documentation', 'info'))
  13.     }, [])

  15.     return (
  16.         ...
  17.     )
  18. }
  19. ```

5 - Upsert or dismiss notification from Redux actions.

  1. ``` js
  2. // 1. Retrieve the action to create/update a notification.
  3. import {notify} from 'reapop'

  5. const sendResetPasswordLink = () => (dispatch) => {
  6.     axios.post('https://api.example.com/users/ask-reset-password')
  7.         // 2. Create a notification.
  8.         .then((resp) => dispatch(notify(resp.data.detail, 'success'))
  9.         .catch((resp) => dispatch(notify(resp.data.detail, 'error'))
  10.     }
  11. }
  12. ```

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.

  1. ``` jsx
  2. import React from 'react'
  3. import {NotificationsProvider} from 'reapop'

  5. const ARootComponent = () => {
  6.     return (
  7.         <NotificationsProvider>
  8.             // ... components
  9.         </NotificationsProvider>
  10.     )
  11. }
  12. ```


2 - Add the NotificationsSystem component to your app. Place this component at the root of your application to avoid position conflicts.

  1. ``` jsx
  2. import React from 'react'
  3. import NotificationsSystem, {atalhoTheme, useNotifications} from 'reapop'

  5. const ATopLevelComponent = () => {
  6.     // 1. Retrieve the notifications to display, and the function used to dismiss a notification.
  7.     const {notifications, dismissNotification} = useNotifications()
  8.     return (
  9.         <div>
  10.             <NotificationsSystem
  11.                 // 2. Pass the notifications you want Reapop to display.
  12.                 notifications={notifications}
  13.                 // 3. Pass the function used to dismiss a notification.
  14.                 dismissNotification={(id) => dismissNotification(id)}
  15.                 // 4. Pass a builtIn theme or a custom theme.
  16.                 theme={atalhoTheme}
  17.             />
  18.         </div>
  19.     )
  20. }
  21. ```

3 - Set default notifications attributes

  1. ``` js
  2. import {setUpNotifications} from 'reapop'

  4. // run this function when your application starts before creating any notifications
  5. setUpNotifications({
  6.     defaultProps: {
  7.         position: 'top-right',
  8.         dismissible: true
  9.     }
  10. })
  11. ```

4 - Upsert or dismiss notification from any React components.

  1. ``` jsx
  2. import React from 'react'
  3. import {useNotifications} from 'reapop'

  5. const AComponent = () => {
  6.     // 1. Retrieve the action to create/update a notification.
  7.     const {notify} = useNotifications()
  8.     
  9.     useEffect(() => {
  10.         // 2. Create a notification.
  11.         notify('Welcome to the documentation', 'info')
  12.     }, [])

  14.     return (
  15.         ...
  16.     )
  17. }
  18. ```

Documentation


Read the documentation to learn more and see what you can with it.

License


Reapop is under MIT License