Simple Interactive Snackbar & Toast Notification In Vanilla JavaScript – notifyjs

Preview:

Description:

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

How to use it:

Install and import the notifyjs.

# NPM
$ npm install @codewithkyle/notifyjs --save

import { Notifier, snackbar, toast, append } from '@codewithkyle/notifyjs';

Or download and import the JavaScript file Notify.js into the document.

<script src="https://cdn.jsdelivr.net/npm/@codewithkyle/[email protected]/notify.min.js"></script>

Create a default snackbar notification on the page.

notifier.snackbar({
    message: 'Snackbar Notification Message'
});

Create a default toast notification on the page.

notifier.toast({
    title: 'Toast Title',
    message: 'Toast Notification Message'
});

Make the snackbar notification auto dismiss after a timeout.

notifier.snackbar({
    message: 'Snackbar Notification Message',
    duration: 4000
});

Determine whether the notification is closeable.

notifier.snackbar({
    message: 'Snackbar Notification Message',
    closeable: true
});

Add a custom action button to the snackbar notification.

notifier.snackbar({
    message: 'Snackbar Notification Message',
    buttons: {
      label: 'Action Button',
      callback: function(){
        // custom function here
      },
      ariaLabel: '',
      classes: '',
      autofocus: true
    }
});

Add additional CSS class(es) to the notification wrapper.

notifier.snackbar({
    message: 'Snackbar Notification Message',
    classes: ''
});

Determine whether to auto focus on the notification.

notifier.snackbar({
    message: 'Snackbar Notification Message',
    autofocus: true
});

Show a horizontal or vertical timer inside the notification.

notifier.snackbar({
  message: 'Snackbar Notification Message',
  timer: "vertical"// or "horizontal"
});

Disable the notification queue.

new Notify({
    message: 'Snackbar Notification Message',
    force: true
});

All default options.

// snackbar
{
  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
}

// toast
{
  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
}

Apply your own CSS styles and animations to the notification.

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

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

snackbar-component {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    border-radius: 0.25rem;
    background-color: #333;
    box-shadow: 0 3px 5px -1px rgba(51, 51, 51, 0.15), 0 6px 10px 0 rgba(51, 51, 51, 0.15), 0 1px 18px 0 rgba(51, 51, 51, 0.15);
    color: rgba(255, 255, 255, 0.87);
    min-width: 350px;
    max-width: 90vw;
    transform: scale(0.87);
    opacity: 0;
    z-index: 1000;
    transform-origin: center;
    animation: notificationPop 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

snackbar-component[position][position~="bottom"] {
    bottom: 1rem;
}

snackbar-component[position][position~="top"] {
    top: 1rem;
}

snackbar-component[position][position~="center"] {
    left: 50%;
    transform: translate(-50%) scale(0.87);
    transform-origin: left center;
    animation: notificationPopCenter 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

snackbar-component[position][position~="left"] {
    left: 1.5rem;
}

snackbar-component[position][position~="right"] {
    right: 1.5rem;
}

snackbar-component p {
    padding: 0.875rem 1rem;
    line-height: 1.618;
    font-size: 0.875rem;
    margin: 0;
}

snackbar-component snackbar-actions {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.5rem;
}

snackbar-component snackbar-actions button {
    user-select: none;
    font-weight: 500;
    font-size: 0.875rem;
    height: 2.5rem;
    line-height: 2.5rem;
    padding: 0 0.5rem;
    color: #4a99ff;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    position: relative;
    background: transparent;
    border: none;
    outline: none;
}

snackbar-component snackbar-actions button:not(:last-child) {
    margin-right: 0.5rem;
}

snackbar-component snackbar-actions button:hover::before {
    transform: scale(1);
    background-color: rgba(74, 153, 255, 0.15);
    transition: transform 175ms cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 75ms ease;
}

snackbar-component snackbar-actions button:active::before {
    background-color: rgba(74, 153, 255, 0.3);
    transition: background-color 75ms ease-in-out;
}

snackbar-component snackbar-actions button::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.25rem;
    background-color: transparent;
    transform-origin: center;
    transform: scale(0.3);
    transition: all 75ms ease-out;
}

snackbar-component snackbar-actions close-button {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
    color: rgba(255, 255, 255, 0.87);
    cursor: pointer;
    user-select: none;
    transition: color 75ms ease-in-out;
    position: relative;
}

snackbar-component snackbar-actions close-button:hover {
    color: #fff;
}

snackbar-component snackbar-actions close-button:hover::before {
    transform: scale(1);
    background-color: rgba(255, 255, 255, 0.1);
    transition: transform 175ms cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 75ms ease;
}

snackbar-component snackbar-actions close-button:active {
    color: #fff;
}

snackbar-component snackbar-actions close-button:active::before {
    background-color: rgba(255, 255, 255, 0.15);
    transition: background-color 75ms ease-in-out;
}

snackbar-component snackbar-actions close-button svg {
    width: 20px;
    height: 20px;
    position: relative;
    margin: 0;
}

snackbar-component snackbar-actions close-button::before {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    content: "";
    border-radius: 50%;
    background-color: transparent;
    transform-origin: center;
    transform: scale(0.3);
    transition: all 75ms ease-out;
}

@keyframes notificationPopCenter {
    from {
        opacity: 0;
        transform: scale(0.87) translateX(-50%);
    }

    to {
        opacity: 1;
        transform: scale(1) translateX(-50%);
    }
}

@keyframes notificationPop {
    from {
        opacity: 0;
        transform: scale(0.87);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

Changelog:

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