Animated Queued Toast Messages In Pure JavaScript – siiimple-Toast

Preview:

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'
});

Changelog:

12/12/2019

• v3.1.7