@eduenano27/notifications-hook

Notification Hook

Install

npm install @eduenano27/notifications-hook

NotificationProvider Attributes

Attribute	Type	Description	Default
push	({ notification: INotification, timeToDismiss?: number }) => void	Show notification	{ timeToDismiss: 5 }
dismiss	(id: number) => void	Dismiss notification	-/-

INotification Attributes

Attribute	Type	Description	Default
id	number (optional)	Internal ID	undefined
className	string (optional)	Container class	undefined
message	string	JSX.Element	Message

Example

import React from "react";
import { NotificationProvider } from "@eduenano27/notifications-hook";

function NotificationComponent({ notification, handleClose }) {
    return (
        <div className="pgn push-on-sidebar-open pgn-bar">
            <div className={ classNames('alert', notification.className ?? 'alert-info') }>
                <button type="button" className="close" onClick={ handleClose }>
                    <span>×</span>
                    <span className="sr-only">Close</span>
                </button>
                
                <span>{ notification.message }</span>
            </div>
        </div>
    );
}

function NotificationContainerComponent() {
    return (
        <div className="pgn-wrapper" data-position="top-right">
            { children }
        </div>
    );
}

export default function AppComponent() {
    return (
        <NotificationProvider   container={ NotificationContainerComponent }
                                notification={ NotificationComponent }>
            ...
        </NotificationProvider>
    );
}

import React from "react";
import { NotificationProvider } from "@eduenano27/notifications-hook";

export default function AppComponent() {
    const { push } = useNotification();

    const pushNotification = () => push({
        notification: {
            message: 'Test notifications',
            className: 'alert-success'
        },

        timeToDismiss: 10
    });

    return (
        <button onClick={ pushNotification }>Show</button>
    );
}