A lightweight JavaScript library for creating snackbar & toaster notifications.

Overview

Notify.js

Notify.js is a lightweight (2.3kb) 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>
Comments
  • Optional Chaining

    Optional Chaining

    I've noticed a few errors occasionally popping up when using the snackbar with the force: true option. We need to make sure the snackbar[0].el exists by using snackbar?.[0]?.el before we call .remove()

    bug 
    opened by codewithkyle 1
  • Bump ini from 1.3.5 to 1.3.8

    Bump ini from 1.3.5 to 1.3.8

    Bumps ini from 1.3.5 to 1.3.8.

    Commits
    • a2c5da8 1.3.8
    • af5c6bb Do not use Object.create(null)
    • 8b648a1 don't test where our devdeps don't even work
    • c74c8af 1.3.7
    • 024b8b5 update deps, add linting
    • 032fbaf Use Object.create(null) to avoid default object property hazards
    • 2da9039 1.3.6
    • cfea636 better git push script, before publish instead of after
    • 56d2805 do not allow invalid hazardous string as section name
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by isaacs, a new releaser for ini since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump minimist from 1.2.0 to 1.2.5

    Bump minimist from 1.2.0 to 1.2.5

    Bumps minimist from 1.2.0 to 1.2.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Dynamic Classes

    Dynamic Classes

    Add the ability to apply dynamic classes to the snackbar element along with each button. Along with this deprecate the position value from the notification object.

    enhancement 
    opened by codewithkyle 1
  • v3

    v3

    Added

    • type declaration files
    • new append() function
    • alternate CDN version

    Fixed

    • autofocus bug (#19)
    • action button bug (#20)

    ⚠️ Breaking Changes ⚠️

    This update includes two minor breaking changes:

    • snackbar notifications now default to force: true
    • closeable snackbar and toaster notifications now default autofocus: true
    opened by codewithkyle 0
  • V2.1.0

    V2.1.0

    Added

    • ability to autofocus buttons (#14)
    • CDN compatible version (ES Module)
    • role attributes to snackbar and toast notifications
    • toast notificaitons can contain buttons (#15)
    • toast notification timers (#13)
    • updated readme

    Fixed

    • toast notifications now stack with oldest notifications appearing at the bottom (better UX/expected notification behavior)
    opened by codewithkyle 0
  • Accessibility & Autofocus

    Accessibility & Autofocus

    We need to ensure that the HTML elements that we generate follow the accessibility best practices. We should also allow developers to set an autofocus value on a snackbar button or the toast/snackbar close button.

    enhancement 
    opened by codewithkyle 0
  • Timer Functionality

    Timer Functionality

    The toaster notification interface needs a timer boolean setting. When true it will generated a timer element that will scale as the duration is reduced. Timers should support a timerType setting that can be "vertical" or "horizontal" with horizontal being the default. These values will be used to determine if we need to scaleX() or scaleY() during the animation callback method.

    Why isn't this controlled via CSS keyframe animations?

    Because notification timers are paused when the window loses focus so we must control the animations via inline CSS and JavaScript.

    enhancement 
    opened by codewithkyle 0
  • Toaster Notifications

    Toaster Notifications

    Notifications should be split into two types:

    • snackbar
    • toaster

    Snackbar notifications retain the current notification functionality & structure while toaster notifications are placed in a visible stack.

    enhancement 
    opened by codewithkyle 0
  • Updated Readme

    Updated Readme

    The new notify export is not documented. We should also add a roadmap for upcoming features.

    • Ability to display a countdown progress bar
    • Ability to provide an array of class names
    • Ability to make the queue stackable (DigitalOcean style notifications)
    documentation 
    opened by codewithkyle 0
Releases(v3.1.0)
  • v3.1.0(Mar 26, 2021)

  • v3.0.0(Mar 25, 2021)

    Added

    • type declaration files
    • new append() function
    • alternate CDN version

    Fixed

    • autofocus bug (#19)
    • action button bug (#20)

    ⚠️ Breaking Changes ⚠️

    This update includes two minor breaking changes:

    • snackbar notifications now default to force: true
    • closeable snackbar and toaster notifications now default autofocus: true
    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Jan 21, 2021)

  • v2.1.0(Nov 9, 2020)

    Added

    • ability to autofocus buttons (#14)
    • CDN compatible version (ES Module)
    • role attributes to snackbar and toast notifications
    • toast notifications can contain buttons (#15)
    • toast notification timers (#13)
    • updated readme

    Fixed

    • toast notifications now stack with newest notifications appearing at the bottom (better UX/expected notification behavior)
    Source code(tar.gz)
    Source code(zip)
  • v2.0.3(Sep 16, 2020)

  • v2.0.1(Apr 24, 2020)

  • v2.0.0(Apr 23, 2020)

    Added

    • refactored elements into web components
    • renamed NotificationManager() to Notifier()

    Fixed

    • toast components use node.inserBefore() instead of forcing the column-reverse CSS property to render in the correct order

    Removed

    • deprecated position value
    • notify() export -- replaced with snackbar()
    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Apr 4, 2020)

  • v1.1.0(Feb 11, 2020)

    Added

    • support for applying dynamic notification classes #6
    • support for dynamic button classes
    • testing
    • generic material design based CSS stylesheet

    Deprecated

    • notifications position value
    • notifications element value
    Source code(tar.gz)
    Source code(zip)
  • v1.0.2(Jan 9, 2020)

  • v1.0.0(Dec 15, 2019)

    ⚠️ Breaking Changes ⚠️

    This version of Notify.js contains breaking changes due to switching from ES5 to ES6. Starting with this version IE 11 is no longer supported.

    Added

    • TypeScript declaration file for Notify.js

    Changed

    • Updated from ES5 to ES2019

    Removed

    • Support for IE 11
    • Removed minimum notification duration
    Source code(tar.gz)
    Source code(zip)
  • v0.2.0(Sep 30, 2019)

    ⚠️ Breaking Changes ⚠️

    This version of Notifyjs contains breaking changes due to a complete rework of the notification system.

    Key Changes

    The entire library has been refactored to be a notification management system instead of creating individual instances of the notifications. Notifications are queued and will be displayed in the order requested with the option to force a notification to skip the queue and be displayed immediately.

    Features

    • Reworked library to use window.requestAnimationFrame instead of setTimeout in order to increase performance
    • Notifications are queued and will be displayed in the order they're submitted
    • Added positioning information/values
    • Updated HTML structure to allow for more robust layouts/designs
    • Removed the 10 second maximum notification duration

    Roadmap

    • Set custom classes on the <snackbar-notification> element
    Source code(tar.gz)
    Source code(zip)
Owner
Kyle Andrews
UX Designer & Developer
Kyle Andrews
A simple, jQuery free Snackbar (Toast) alert

js-snackbar What is a SnackBar? According to Material Design a Snackbar or Toast provides "brief messages about app processes at the bottom of the scr

Michael Mickelson 43 Jan 5, 2023
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A dependency-free JavaScript library for creating discreet pop-up notifications.

Polipop A dependency-free JavaScript library for creating discreet pop-up notifications. Demo See demo at minitek.github.io/polipop/. Documentation Se

Minitek 8 Aug 15, 2022
Unread-Messages.js is a lightweight library that lets a user add floating number notifications to any object.

Unread-Messages.js About Unread-Messages.js is a lightweight library that lets a user add mobile-like notification counter badge to any object with ju

Mulaza Jacinto 2 Dec 18, 2021
Fnon is a client-side JavaScript library for models, loading indicators, notifications, and alerts which makes your web projects much better.

???????? Fnon is the name of my late mother, It's an Arabic word which means Art, I created this library in honor of her name. Fnon is a client-side J

Adel N Al-Awdy 5 Sep 11, 2022
A lightweight JavaScript library for creating interactive maps and pretty data visualization.

Jsvectormap A lightweight Javascript library for creating interactive maps and pretty data visualization. Explore docs . Report bug · View demo · Down

Mustafa Omar 204 Dec 24, 2022
A Javascript based web application for monitoring, analytics and notifications

JELLYWATCH Jellywatch is a javascript web application for monitoring*, analytics** and notifications** inspired by tautulli for Jellyfin/Emby Media Se

null 27 Dec 28, 2022
A javascript framework for developing pretty browser dialogs and notifications.

AlertifyJS AlertifyJS is a javascript framework for developing pretty browser dialogs and notifications. AlertifyJS is an extreme makeover of alertify

Mohammad Younes 2k Jan 2, 2023
✨ Small and Clean JavaScript Toast Notifications

BuzzNotify Small and Clean JavaScript Toast Notifications New version introduces breaking changes! Now the styles come separately and you will have to

R. Eliut 9 Aug 23, 2022
A simple, lightweight, clean and small library for creating guided product tours for your web app.

Tourguide.js Simple, lightweight library for creating guided tours for your web, apps and more. A tour guide is a person who provides assistance, info

Docsie.io 277 Dec 12, 2022
Subscribe to rss feeds from anywhere, receive notifications from anywhere.

INK RSS 管理订阅,接收通知 示例网页 · 示例群组 · 报告Bug 介绍 特点 项目背景 TODO 注意事项 部署 额外附赠 使用建议 调查 贡献 作者 协议 介绍 INK RSS 提供及时且多样的 rss 通知服务,借助现有的接口你可以在任意位置订阅,并使用任意方式接收通知,并且所有服务均

null 253 Dec 28, 2022
Finding RATs is hard. Push notifications for findarat.com.au

RAT-Push-Notifications Finding RATs is hard. Push notifications for findarat.com.au What is this? This is a script that will run on your computer / se

Richard S 3 Jan 13, 2022
Polkadot Basic Notifications

A dead-simple, yet highly effective notification system for Polkadot and its parachains (or, any substrate-based chain, most specifically).

Kian Paimani 38 Jan 2, 2023
A handy wrapper for the Web Notifications API

Notify.js A handy wrapper for using the Web Notifications API. Notify.js aims to simplify requesting user permission and associated Web Notification A

Alex Gibson 1.3k Dec 4, 2022
ToDo list for your GitHub notifications. Available on MacOS.

GitToDo Streamline your workflow, stay on top of issues and pull requests. ToDo list for your GitHub notifications. Available on MacOS. Features Menu

Rushat Gabhane 2 Jun 14, 2022
A jQuery plugin wrapper around Bootstrap Alerts, to create Notifications (Toasts)

bootstrap-show-notification A jQuery plugin wrapper around Bootstrap 4 Alerts, to show them as toasts (also called notifications) dynamically from Jav

Stefan Haack 10 Aug 22, 2022
ToastmeJS is a very simple, flexible and light weigth plugin that shows Notifications and modal Dialogs on your website.

⚡ ToastmeJS ToastmeJS is a very simple, flexible and light weigth plugin that shows Notifications and modal Dialogs on your website. Customize positio

Alejandro Vivas 8 Jun 20, 2022