Small Vanilla JavaScript Toast Notice Plugin – vanilla-toast

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()