Notify.js

Notify.js is a lightweight utility library for creating toast, snackbars, and notifications.

CSS Not Included

This library does not provide any CSS or base styling for the components / HTML Elements it produces. Example styles can be found at Brixi UI.

• Notifications
• Toast
• Snackbar
• Sonner (coming soon)

Installation

Download Notify.js via NPM:

npm i --save @codewithkyle/notifyjs

Or use the CDN version:

importtoasterfrom"https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@5/dist/toaster.js";importsnackbarfrom"https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@5/dist/snackbar.js";importnotificationsfrom"https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@5/dist/notifications.js";importsonnerfrom"https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@5/dist/sonner.js";

Usage

1. Snackbar Notification
   1. Snackbar Interface
   2. Snackbar HTML Structure
2. Notifications
   1. Notifications Interface
   2. Notifications HTML Structure
3. Toast Notification
   1. Toast Interface
   2. Toast HTML Structure
4. Sonner Notification
   1. Sonner Interface
   2. Sonner HTML Structure

Global Manager

Import the notification type:

importsnackbarfrom"@codewithkyle/notifyjs/snackbar";snackbar({message: "All snackbar notifications require a message",});// Adds an action buttonsnackbar({message: "All snackbar notifications require a message",buttons: [{label: "Update",callback: ()=>{console.log("User clicked the update button");},},],});

importnotificationsfrom"@codewithkyle/notifyjs/notifications";notifications.push({title: "Notificaitons require a title",message: "They also require a message.",});// Append custom toast notifications:classCustomNotificationElementextendsHTMLElement{constructor(message){super();this.innerText=message;setTimeout(()=>{this.remove();},5000);}}notifications.append(newCustomNotificationElement());

importtoasterfrom"@codewithkyle/notifyjs/toaster";toaster.push({message: "Toast notifications require a message."});

importsonnerfrom"@codewithkyle/notifyjs/sonner";sonner.push({heading: "Sonner toast example",message: "Heading and message are optional."});

Custom Events

As of version 5 you can trigger notifications using custom events dispatched on the window.

constevent=newCustomEvent("notify:sonner",{detail: {heading: "Sonner Example",message: `Example sonner toast message.`,}});window.dispatchEvent(event);

The follow events are supported:

• notify:sonner
• notify:alert
• notify:toast
• notify:snackbar

The detail object accepts the same interfaces as the function versions (see below).

Custom Event Callbacks

As of version 5 all callback interfaces support event and eventData properties. When the user interacts with a button a custom event will be fired on the window.

importsonnerfrom"@codewithkyle/notifyjs/sonner";sonner.push({message: "Heading and message are optional.",button: {label: "Test",event: "test-event",eventData: "Hi mom!",}});// received when the user clicks the button within the sonner notificationwindow.addEventListener("test-event",(e)=>{alert(e.detail);});

---

Snackbar Notification

Snackbar notifications are great for quick one-off notifications that require an action.

Snackbar Interface

typeSnackbarNotification={message: string;duration?: number;// in secondscloseable?: boolean;buttons?: Array<{label: string;callback?: Function;ariaLabel?: string;classes?: Array<string>|string;autofocus?: boolean;event?: string;eventData?: any;}>;force?: boolean;// defaults to trueclasses?: Array<string>|string;autofocus?: boolean;// defaults to true}

Snackbar HTML Structure

<snackbar-component><p>Custom notification message</p><snackbar-actions><button>Action</button><buttonclass="close"><svg/></button></snackbar-actions></snackbar-component>

---

Notifications

Notifications are great for application-like notification systems where users will need to recieve warnings, updates, successes, and errors.

Notification Interface

typeNotification={title: string;message: string;closeable?: boolean;icon?: string;// svg or imgduration?: number;// in secondsclasses?: string[];autofocus?: boolean;// defaults to truebuttons?: Array<{label: string;callback?: Function;ariaLabel?: string;classes?: Array<string>|string;autofocus?: boolean;event?: string;eventData?: any;}>;timer?: "vertical"|"horizontal"|null;// defaults to null};

Notification HTML Structure

<notifications-component><notification-component><i><svg/></i><copy-wrapper><h3>Title</h3><p>Custom notification message</p><notification-actions><button>Action</button></notification-actions></copy-wrapper><buttonclass="close"><svg/></button><notification-timerclass="vertical || horizontal"></notification-timer></notification-component></notifications-component>

---

Toast

Toast notifications are great for simple temporary alerts like "Copied to clipboard" or "Added to playlist".

Toast Interface

typeToastNotification={message: string;duration?: number;// in secondsclasses?: string|string[];};

Toast HTML Structure

<toaster-component><outputrole="status">Custom toast message.</output></toaster-component>

Sonner

Sonner notifications are great for simple temporary alerts. The Sonner notification is slightly opinionated due to the custom interaction and animations.

sonner-toast-component {
opacity:var(--opacity);
transform:translateY(var(--y)) translateY(var(--offset)) scale(var(--scale));
transition: transform 300msvar(--ease-in-out), opacity 300msvar(--ease-in-out);
left:0;
bottom:0;
}

Note: the sonner components UX is based on the look and feel of the Sonner react package.

Sonner Interface

typeSonnerNotification={heading?: string,message?: string,duration?: number,classes?: Array<string>|string,button?: {callback?: Function,label: string,classes?: Array<string>|string,event?: string;eventData?: any;}};

Sonner HTML Structure

<sonner-component><sonner-toast-component><copy-wrapper><h3>Example heading</h3><p>This is an example sonner message.</p></copy-wrapper><button>Click me</button></sonner-toast-component></sonner-component>