rea

reapop

📮 A simple and customizable React notifications system

Showing:

Popularity

Downloads/wk

3.7K

GitHub Stars

1.2K

Maintenance

Last Commit

2mos ago

Contributors

18

Package

Dependencies

1

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Readme

Reapop

npm version npm download/month coveralls status

A simple and customizable React notifications system

Summary

Compatibility

Supported browsers

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
IE10, IE11, Edgelast 2 versionslast 2 versionslast 2 versionslast 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.

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.

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 (
        <div>
            <NotificationsSystem
                // 2. Pass the notifications you want Reapop to display.
                notifications={notifications}
                // 3. Pass the function used to dismiss a notification.
                dismissNotification={(id) => dispatch(dismissNotification(id))}
                // 4. Pass a builtIn theme or a custom theme.
                theme={atalhoTheme}
            />
        </div>
    )
}

3 - Set default notifications attributes

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.

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.

// 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.

import React from 'react'
import {NotificationsProvider} from 'reapop'

const ARootComponent = () => {
    return (
        <NotificationsProvider>
            // ... components
        </NotificationsProvider>
    )
}

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

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 (
        <div>
            <NotificationsSystem
                // 2. Pass the notifications you want Reapop to display.
                notifications={notifications}
                // 3. Pass the function used to dismiss a notification.
                dismissNotification={(id) => dismissNotification(id)}
                // 4. Pass a builtIn theme or a custom theme.
                theme={atalhoTheme}
            />
        </div>
    )
}

3 - Set default notifications attributes

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.

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 to learn more and see what you can with it.

License

Reapop is under MIT License

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

rt
react-toastifyReact notification made easy 🚀 !
User Rating
4.7/ 5
32
Top Feedback
23Great Documentation
17Easy to Use
12Highly Customizable
GitHub Stars
8K
Weekly Downloads
722K
not
notistackHighly customizable notification snackbars (toasts) that can be stacked on top of each other
User Rating
4.8/ 5
4
Top Feedback
2Easy to Use
2Performant
GitHub Stars
3K
Weekly Downloads
256K
rc-notificationReact Notification
User Rating
5.0/ 5
2
Top Feedback
2Easy to Use
1Great Documentation
1Highly Customizable
GitHub Stars
310
Weekly Downloads
566K
rtn
react-toast-notifications🍞 A toast notification system for react
User Rating
5.0/ 5
2
Top Feedback
N/A
GitHub Stars
2K
Weekly Downloads
96K
rn
react-notificationsNotification component for ReactJS
User Rating
4.9/ 5
7
Top Feedback
4Great Documentation
4Easy to Use
2Highly Customizable
GitHub Stars
59
Weekly Downloads
22K
@chakra-ui/alert⚡️ Simple, Modular & Accessible UI Components for your React Applications
User RatingN/A
Top Feedback
N/A
GitHub Stars
23K
Weekly Downloads
185K
See 43 Alternatives

Tutorials

No tutorials found
Add a tutorial