Nevertheless Published Mine
    Wondering what’s next for npm?Check out our public roadmap! »

    @codewithkyle/notifyjs
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.0 • Public • Published

    Notify.js

    Notify.js is a lightweight (2.2kb) utility library for creating snackbar and toaster notifications.

    Installation

    Download Notify.js via NPM:

    npm i --save @codewithkyle/notifyjs

    Or use the CDN version:

    import { Notifier, snackbar, toast, append } from "https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@3/notify.min.mjs";
    <script src="https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@3/notify.min.js"></script>
    <script>
        Notifier.snackbar({ message: "This is a snackbar notification." });
        Notifier.toast({ title: "CDN Example", message: "This is a toast notification." });
    </script>

    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:

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

    Append custom toast notifications:

    import { append } from "@codewithkyle/notifyjs";
    
    class CustomToasterElement extends HTMLElement {
        constructor(message){
            super();
            this.innerText = message;
            setTimeout(() => {
                this.remove();
            }, 5000);
        }
    }
    
    append(new CustomToasterElement());

    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; // defaults to true
        classes?: Array<string> | string;
        autofocus?: boolean; // defaults to true
    }

    Snackbar HTML Structure

    <snackbar-component>
        <p>Custom notification message</p>
        <snackbar-actions>
            <button>Action</button>
            <button class="close">
                <svg />
            </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; // defaults to true
        buttons?: Array<{
            label: string;
            callback: Function;
            ariaLabel?: string;
            classes?: Array<string> | string;
            autofocus?: boolean;
        }>;
        timer?: "vertical" | "horizontal" | null; // defaults to null
    };

    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 class="close">
                <svg />
            </button>
            <toast-timer class="vertical || horizontal"></toast-timer>
        </toast-component>
    </toaster-component>

    Install

    npm i @codewithkyle/notifyjs

    DownloadsWeekly Downloads

    96

    Version

    3.1.0

    License

    MIT

    Unpacked Size

    53.4 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar