Simple Interactive Snackbar & Toast Notification In Vanilla JavaScript – notifyjs

Category: Javascript , Notification | March 27, 2021
Author: codewithkyle
Views Total: 169 views
Official Page: Go to website
Last Update: March 27, 2021
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:

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

You Might Be Interested In:


Leave a Reply