Simple Interactive Snackbar & Toast Notification In Vanilla JavaScript – notifyjs

Category: Javascript , Notification | May 30, 2023
Author:codewithkyle
Views Total:223 views
Official Page:Go to website
Last Update:May 30, 2023
License:MIT

Preview:

Simple Interactive Snackbar & Toast Notification In Vanilla JavaScript – notifyjs

Description:

notifyjs is a vanilla JS notification plugin that shows Material Snackbar and Toasts style notification messages to the user.

How to use it:

1. Install and import the notifyjs.

# NPM
$ npm install @codewithkyle/notifyjs --save
import { snackbar, toaster, notifications } from '@codewithkyle/notifyjs';

2. Or import the modules from a CDN.

import toaster from "https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@4/dist/toaster.js";
import snackbar from "https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@4/dist/snackbar.js";
import notifications from "https://cdn.jsdelivr.net/npm/@codewithkyle/notifyjs@4/dist/notifications.js";

3. Create a snackbar notification on the page.

snackbar({
  // required snackbar message
  message: 'Snackbar Notification Message',
  // optional settings
  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
});

4. Create a toast notification on the page.

toaster.push({
  // required toast message
  message: 'Toast Notification Message',
  // optional settings
  message: string;
  duration?: number; // in seconds
  classes?: string | string[];
});

5. Create a growl-style notification box on the page.

notifications.push({
  // required notification message
  title: 'Notification Title',
  message: 'Notification Message',
  // optional settings
  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
});

6. Apply your own CSS styles and animations to the notifications.

<!-- 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 HTML Structure -->
<toaster-component>
  <output role="status">Custom toast message.</output>
</toaster-component>
<!-- 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>
    <button class="close">
      <svg />
    </button>
    <notification-timer class="vertical || horizontal"></notification-timer>
  </notification-component>
</notifications-component>

Changelog:

v4.1.0 (05/30/2023)

  • Update

v3.1.1 (01/16/2022)

  • Bugfix

v3.1.0 (03/27/2021)

  • improved snackbar rendering performance
  • improved toast rendering performance
  • reduced package size

v3.0.0 (03/26/2021)

  • snackbar notifications now default to force: true
  • closeable snackbar and toaster notifications now default autofocus: true
  • new append() function
  • bugs fixed

v2.1.1 (01/21/2021)

  • Fixed: snackbar undefined element when forced bug

v2.1.0 (11/09/2020)

  • Added ability to autofocus buttons
  • Added role attributes to snackbar and toast notifications
  • Added: toast notifications can contain buttons
  • Added: toast notification timers
  • Fixed: toast notifications now stack with newest notifications appearing at the bottom (better UX/expected notification behavior)

v2.0.3 (09/16/2020)

  • Fixed snackbar button without class bug

v2.0.1 (04/24/2020)

  • 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
  • Removed notify() export — replaced with snackbar()

v1.2.2 (04/18/2020)

  • Fixed toaster notification null check bug
  • Fixed toaster notification close button bug

v1.2.0 (04/05/2020)

  • toaster notification toast() creation
  • renames existing notification funciton to snackbar()

v1.1.0 (02/12/2020)

  • Added support for applying dynamic notificaiton classes
  • Added support for dynamic button classes
  • Added generic material design based CSS stylesheet

v1.0.2 (01/10/2020)

  • new notify export providing access to a global notification manager

v1.0.0 (12/16/2019)

  • Added TypeScript declaration file for Notify.js
  • Updated to ES2019
  • Removed support for IE 11
  • Removed minimum notification duration

v0.2.0 (09/30/2019)

  • 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

You Might Be Interested In:


Leave a Reply