Reapop

A simple and customizable React notifications system

Summary

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

Compatibility

Supported browsers

IE / Edge	Firefox	Chrome	Safari	Opera
IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Demo

Check out the demo.

Installation

npm install reapop --save

Integration & usage

With React and Redux

1 - Add the notifications reducer to your Redux store.

1import {combineReducers, createStore} from 'redux'
2import {reducer as notificationsReducer} from 'reapop'
3
4const rootReducer = combineReducers({
5    notifications: notificationsReducer(),
6    ... your other reducers
7})
8const store = createStore(rootReducer)

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

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

3 - Set default notifications attributes

1import {setUpNotifications} from 'reapop'
2
3// run this function when your application starts before creating any notifications
4setUpNotifications({
5    defaultProps: {
6        position: 'top-right',
7        dismissible: true
8    } 
9})

4 - Upsert or dismiss notification from any React components.

1import React from 'react'
2import {useDispatch} from 'react-redux'
3// 1. Retrieve the action to create/update a notification, or any other actions.
4import {notify} from 'reapop'
5
6const AComponent = () => {
7    // 2. Retrieve the function to dispatch an action.
8    const dispatch = useDispatch() 
9    useEffect(() => {
10        // 3. Create a notification.
11        dispatch(notify('Welcome to the documentation', 'info'))
12    }, [])
13
14    return (
15        ...
16    )
17}

5 - Upsert or dismiss notification from Redux actions.

1// 1. Retrieve the action to create/update a notification.
2import {notify} from 'reapop'
3
4const sendResetPasswordLink = () => (dispatch) => {
5    axios.post('https://api.example.com/users/ask-reset-password')
6        // 2. Create a notification.
7        .then((resp) => dispatch(notify(resp.data.detail, 'success'))
8        .catch((resp) => dispatch(notify(resp.data.detail, 'error'))
9    }
10}

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.

1import React from 'react'
2import {NotificationsProvider} from 'reapop'
3
4const ARootComponent = () => {
5    return (
6        <NotificationsProvider>
7            // ... components
8        </NotificationsProvider>
9    )
10}

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

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

3 - Set default notifications attributes

1import {setUpNotifications} from 'reapop'
2
3// run this function when your application starts before creating any notifications
4setUpNotifications({
5    defaultProps: {
6        position: 'top-right',
7        dismissible: true
8    } 
9})

4 - Upsert or dismiss notification from any React components.

1import React from 'react'
2import {useNotifications} from 'reapop'
3
4const AComponent = () => {
5    // 1. Retrieve the action to create/update a notification.
6    const {notify} = useNotifications()
7    
8    useEffect(() => {
9        // 2. Create a notification.
10        notify('Welcome to the documentation', 'info')
11    }, [])
12
13    return (
14        ...
15    )
16}

Documentation

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

License

Reapop is under MIT License