Nine Parsecs from Milwaukee
Miss any of our Open RFC calls?Watch the recordings here! »

@codewithkyle/notifyjs

2.1.0 • Public • Published

Notify.js

Notify.js is a hyper-lightweight utility library for managing simple snackbar and toaster notifications.

Installation

Download Notify.js via NPM:

npm i --save @codewithkyle/notifyjs

Or use the CDN version:

import { Notifier, snackbar, toast } from "https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@2.1.0/notify.min.mjs;

Usage

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

There are two ways to use this package. You can create a Notification Manager or use the global manager. Each manager has a queue and new notifications are placed in the queue in the order that they're requested. The queue can be skipped by settings the force value to true.

Notification Manager

Import the manager:

import { Notifier } from "@codewithkyle/notifyjs";
const notifier = new Notifier();

Create a snackbar or toast notification:

notifier.snackbar({
    message: "All snackbar notifications require a message",
});
notifier.toast({
    title: "Toast notificaitons require a title",
    message: "And they require a message",
});

Global Manager

Import the notification type:

import { snackbar, toast } from "@codewithkyle/notifyjs";

Create a notification:

notifier.snackbar({
    message: "All snackbar notifications require a message",
});
notifier.toast({
    title: "Toast notificaitons require a title",
    message: "And they require a message",
});
 
// Adds an action button
notifier.snackbar({
    message: "All snackbar notifications require a message",
    buttons: [
        {
            label: "Update",
            callback: () => {
                console.log("User clicked the update button");
            },
        },
    ],
});

Snackbar Notification

Snackbar notifications are great for quick one-off notifications.

Snackbar Interface

interface SnackbarNotification {
    message: string;
    duration?: number; // in seconds
    closeable?: boolean;
    buttons?: Array<{
        label: string;
        callback: Function;
        ariaLabel?: string;
        classes?: Array<string> | string;
        autofocus?: boolean;
    }>;
    force?: boolean;
    classes?: Array<string> | string;
    autofocus?: boolean;
}

Snackbar HTML Structure

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

Toast Notification

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

Toast Interface

type ToasterNotification = {
    title: string;
    message: string;
    closeable?: boolean;
    icon?: string; // svg or img
    duration?: number; // in seconds
    classes?: string[];
    autofocus?: boolean;
    buttons?: Array<{
        label: string;
        callback: Function;
        ariaLabel?: string;
        classes?: Array<string> | string;
        autofocus?: boolean;
    }>;
    timer?: "vertical" | "horizontal";
};

Toast HTML Structure

<toaster-component>
    <toast-component>
        <i>
            <svg />
        </i>
        <copy-wrapper>
            <h3>Title</h3>
            <p>Custom notification message</p>
            <toast-actions>
                <button>Action</button>
            </toast-actions>
        </copy-wrapper>
        <button>
            <svg />
        </button>
    </toast-component>
</toaster-component>

Install

npm i @codewithkyle/notifyjs

DownloadsWeekly Downloads

35

Version

2.1.0

License

MIT

Unpacked Size

61.5 kB

Total Files

13

Last publish

Collaborators

  • avatar