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 | undefined |

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>
    );
}