Simple Interactive Snackbar Notification In Vanilla JavaScript – notifyjs

Preview:

Description:

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

How to use it:

Install and import the notifyjs.

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

import { Notify } from '@codewithkyle/notifyjs';

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

<script src="assets/Notify.js" defer="defer"></script>

Create a default snackbar notification on the page.

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

Make the snackbar notification auto dismiss after a timeout.

new Notify({
    message: 'Snackbar Notification Message',
    duration: 4000
});

Determine whether the notification is closeable.

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

Add a custom action button to the snackbar notification.

new Notify({
    message: 'Snackbar Notification Message',
    buttons: {
      label: 'Action Button',
      callback: function(){
        // custom function here
      }
    }
});

Disable the notification queue.

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

Apply your own CSS styles and animations to the snackbar notification.

user-notification{
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) scale(0.87);
  opacity: 0;
  transform-origin: center bottom;
  padding: 0 16px;
  border-radius: 4px;
  min-width: 340px;
  max-width: calc(100vw - 64px);
  box-shadow: 0 1px 3px rgba(0,0,0, 0.15), 0 2px 6px rgba(0,0,0, 0.15);
  animation: popNotification 4000ms cubic-bezier(0.0, 0.0, 0.2, 1);
  background-color: rgb(51, 51, 51);
  color: rgba(255,255,255, 0.87);
  font-size: 14px;
  line-height: 48px;
  height: 48px;
  z-index: 9999;
}

user-notification.is-infinite{
  animation: popInNotification 150ms cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
}

user-notification button{
  display: inline-block;
  height: 36px;
  line-height: 34px;
  margin: 0;
  padding: 0 16px;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 2px;
  position: absolute;
  font-size: 14px;
  text-transform: uppercase;
  user-select: none;
  top: 6px;
  right: 6px;
  transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

user-notification button:active{
  transform: none;
}

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

@keyframes popNotification{
  0%{
      transform: translateX(-50%) scale(0.87);
      opacity: 0;
  }
  3.75%, 96.25%{
      transform: translateX(-50%) scale(1);
      opacity: 1;
  }
  100%{
      transform: translateX(-50%) scale(1);
      animation-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
      opacity: 0;
  }
}

Changelog:

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