@boxfish-studio/react-notification-manager v0.1.0

Installation 🧰

$ npm i @boxfish-studio/react-notification-manager

or yarn

$ yarn add @boxfish-studio/react-notification-manager

How to use 📝

1. Wrap your app in the NotificationProvider:

import { NotificationProvider } from '@boxfish-studio/react-notification-manager'
<NotificationProvider>
    <App />
</NotificationProvider>

2. Import the NotificationManager and place it in your layout:

import { NotificationManager } from '@boxfish-studio/react-notification-manager'

const Layout = () => {
    return (
        <div>
            // ...
            <NotificationManager />
        </div>
    )
}

3. Use the useNotification hook:

import { useNotification, type NotificationType } from '@boxfish-studio/react-notification-manager'

const Button = () => {
    const { showNotification } = useNotification()

    const addNotification = () => {
        showNotification({
            message: "I'm a toast!",
            type: NotificationType.Info,
            duration: 5000, // Optional
        })
    }

    return <button onClick={addNotification}>Click on me to show a notification!</button>
}

Customization 🖌️

The NotificationManager component accepts a configuration prop to allow you to customize your notifications. Custom configuration must be of type INotificationConfiguration. All available props are shown below:

interface INotificationConfiguration {
    hasIcon?: boolean
    icons?: {
        [key in NotificationType]?: string
    }
}

enum NotificationType {
    Success = 'success',
    Error = 'error',
    Warning = 'warning',
    Info = 'info',
}

NotificationManager Props

Example:

import { NotificationManager, type INotificationConfiguration } from '@boxfish-studio/react-notification-manager'

const Layout = () => {
    // Optional configuration
    const configuration: INotificationConfiguration = {
        hasIcon: true,
        icons: {
            warning: '/custom-warning-icon.svg',
        },
    }

    return (
        // ...
        <NotificationManager configuration={configuration} />
    )
}

Styling

All the elements of the components contain classes that you can point to in your styles to customize the appearance of the notifications, just override the styles in your global css file.

Example:

.notification-manager {
    bottom: 2rem;
    left: 2rem;
    /* To remove the default right position */
    right: unset;

    .notification__toast {
        border-radius: 8px;
    }

    .notification--warning {
        background-color: #f58223;
    }

    .notification__message {
        color: black;
        font-size: 18px;
        font-weight: 500;
    }

}

Utility functions

The useNotification hook returns three functions:

const { showNotification, removeNotification, updateNotification } = useNotification()

1. showNotification: Adds a notification. Receives an object with the notification properties.

showNotification({
    message: "I'm a toast!",
    type: NotificationType.Info,
    duration: 5000, // Optional
})

2. removeNotification: Removes a notification. Receives an id of the notification to remove.

removeNotification(id)

3. updateNotification: Updates a notification. Receives an id of the notification to update, and an object with the notification properties to update.

updateNotification(id, {
    message: 'ERROR!',
    type: NotificationType.Error,
    duration: 0, // Doesn't close automatically.
})

Notifications

The useNotification hook also returns an array with all the notifications. This array is of type INotification[]. You can use this array to manage your notifications whenever you want.

const { notifications } = useNotification()

interface INotification {
    id: string
    message: string
    type: NotificationType
    duration?: number
}