Animated Queued Toast Messages In Pure JavaScript – siiimple-Toast

Category: Javascript , Notification | March 17, 2017
Author: gomonk3037
Views Total: 602
Official Page: Go to website
Last Update: March 17, 2017
License: MIT

Preview:

Animated Queued Toast Messages In Pure JavaScript – siiimple-Toast

Description:

Yet another ES6 notification library that helps you display animated Material inspired toast messages on the webpage.

Features:

  • Supports both horizontal and vertical positions.
  • 3 types of toast notifications: default, alert and success.
  • Supports notification queues.
  • Smooth animations based on CSS3 transitions and transforms.

Installation:

npm install --save siiimple-toast

Basic usage:

Import the siiimple-toast into your project or directly include the main JavaScript file on the webpage.

<script src="main.js"></script>

Initialize the toast notification library.

const toast = new siiimpleToast();

Create default/alert/success toast message as these:

// default
toast.message('Hello World!'); 

// success
toast.success('Hello World!');

// alert 
toast.alert('Hello World!');

Config the toast message to your taste.

const toast = new siiimpleToast({
      position: 'fixed',
      padding: '1rem 1.2rem',
      minWidth: '17rem',
      zIndex: '10',
      borderRadius: '2px',
      color: 'white',
      fontWeight: 300,
      whiteSpace: 'nowrap',
      pointerEvents: 'none',
      opacity: 0,
      boxShadow: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)',
      transform: 'scale(0.5)',
      transition: 'all 0.4s ease-out'
});