Toast-style Web Notifications In Vanilla JavaScript – VanillaToasts

Preview:

Description:

VanillaToasts is a lightweight and easy-to-use vanilla JavaScript library for displaying toast-style notifications on your website / web application.

Currently supports 4 different types of notifications: success, info, warning, and error.

How to use it:

Import the vanillatoasts.css and vanillatoasts.js into your webpage.

<script src="vanillatoasts.js"></script>
<link href="vanillatoasts.css" rel="stylesheet"></script>

Create a default toast message that slides out from the right side of your webpage.

VanillaToasts.create({
  title: 'Message Title',
  text: 'Notification text',
});

Optional parameters.

VanillaToasts.create({
  
  // notification title
  title: 'Welcome to my site',
  // notification message
  text: 'This toast will hide after 5000ms or when you click it',
  // success, info, warning, error   / optional parameter
  type: 'warning', 
  // path to notification icon
  icon: '/img/alert-icon.jpg',
  // topRight, topLeft, topCenter, bottomRight, bottomLeft, bottomCenter
  positionClass: 'bottomLeft',
  // auto dismiss after 5000ms
  timeout: 5000,
  // hide any other toasts, keeping only the latest visible
  single: true,
  // executed when toast is clicked
  callback: function() { ... } 
});

Hide the toast notification manually.

toast.hide()

Set the timeout.

VanillaToasts.setTimeout(toast.id, 2000);

Changelog:

v1.5.0 (03/03/2022)

• Added a single boolean option that will hide any other toasts, keeping only the latest visible.
• Added an onHide function option that will run whenever the toast gets hidden

v1.4.0 (04/17/2020)

• add support for positioning the toast
• fixed no mouse events in toast container

07/20/2018

• Added vanillatoast id infront of generic h4 rule to avoid normal page h4 tags getting unintended styling applied
• New function to manually begin the timeout of a toast which was created without a timeout option