Small Vanilla JavaScript Toast Notice Plugin – vanilla-toast

Category: Javascript , Notification | June 1, 2018
Author: talsu
Views Total: 172 views
Official Page: Go to website
Last Update: June 1, 2018
License: MIT

Preview:

Small Vanilla JavaScript Toast Notice Plugin – vanilla-toast

Description:

vanilla-toast is a zero-dependency JavaScript plugin to create customizable and themeable toast-like notifications on the web app.

Also supports chained methods that enable you to display the toast notifications one by one.

By default, the active toast notification will auto-dismiss after 2 seconds with a fade animation. You can config the timeout and fade duration in the JavaScript.

How to use it:

Insert the ‘vanilla-toast.css’ and ‘vanilla-toast.js’ files into the html document.

<link rel="stylesheet" href="vanilla-toast.css">
<script src="vanilla-toast.js"></script>

Create a default toast notification.

vanillaToast.show('Hello World!')

// or
vanillaToast.default('Hello World!')

Apply themes to the toast notification. Available themes:

  • default
  • info
  • success
  • warning
  • error
// info
vanillaToast.info('Hello World!')

// success
vanillaToast.success('Hello World!')

// warning
vanillaToast.warning('Hello World!')

// error
vanillaToast.error('Hello World!')

Config the toast notification by passing the following options:

vanillaToast.show('Hello World!',{

  // theme name or custom class
  className: 'default',

  // fade animation options
  fadeDuration: 400,
  fadeInterval: 16,

  // timeout
  duration: 2000,

  // shows close button
  closeButton: false,

  // closes the notification immediately
  immediately: false
  
})

Execute a callback after the toast notification is closed.

vanillaToast.show('Hello World!',{

  // theme name or custom class
  className: 'default',

  // fade animation options
  fadeDuration: 400,
  fadeInterval: 16,

  // timeout
  duration: 2000,

  // shows close button
  closeButton: false,

  // closes the notification immediately
  immediately: false

}, function(){
  // callback function here
})

More API methods.

// clears the current toast notification
vanillaToast.cancel();

// clears all the toast notifications
vanillaToast.cancelAll()

You Might Be Interested In:


Leave a Reply