Lightweight Toast & Snackbar JavaScript Library – Yoyo Toast

Preview:

Description:

Yoyo Toast is a lightweight JavaScript library for creating highly customizable toast popups on web pages.

It can help developers create temporary alert messages that disappear automatically and snackbar messages with buttons for user actions like “confirm” or “cancel”.

A handy countdown timer, located at the bottom of each toast, lets users know when the message will disappear.

Yoyo Toast also comes with five distinct toast types: “info,” “question,” “success,” “warning,” and “danger,” each with its own SVG icon for quick recognition.

How to use it:

1. Download the yoyo-popup.min.js script and add it to the web page.

<script src="yoyo-toast.min.js"></script>

2. Generate a basic toast that auto-dismisses after 5 seconds:

yoyoToast.fire({
  message: 'This is a basic Toast!',
});

3. Create a snackbar that provides user actions:

yoyoToast.fire({
  title: 'Confirm Your Action',
  message: 'Are you sure to delete this entry?',
  timeout: 10000,
  subtext: '~ More Text ~',
  position: 'top-right',
  hasConfirmation: true,
  confirmLabel: 'Confirm',
  confirmFunction: () => alert('Confirmed'),
  hasCancellation: true,
  cancelLabel: 'Cancel',
  cancelFunction: () => alert('Cancelled'),
});

4. Yoyo Toast provides many configuration options to customize the look and behavior of your toasts. Here are the default options:

{
  type = 'info', // 'info','question','success','warning','danger'
  title,
  message,
  subtext,
  timeout = 5000,
  position = 'top-right', // 'top-left', 'top-right', 'bottom-left', 'bottom-right'
  timeoutFunction = () => {},
  hasConfirmation = false,
  confirmLabel = 'Confirm',
  confirmFunction = () => { },
  hasCancellation = false,
  cancelLabel = 'Cancel',
  cancelFunction = () => { },
}

Changelog:

v1.0.1 (08/22/2024)

• Update