Customizable Auto-Dismissing Toasts With JavaScript – Toasty

toasty is a lightweight JavaScript notification library for displaying customizable toast messages with icons and an auto-dismissing countdown bar.

How to use it:

1. Import the Toasty’s script and stylesheet into your document.

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

2. This library integrates Font Awesome 6 icons for an enhanced visual experience, though you have the full flexibility to customize these icons according to your preferences.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.x.x/css/all.min.css" />

3. Create an empty list to hold the toast notifications.

4. Add toast notifications to your web app using the following functions:

toasty.info("Info Message");
toasty.success("Success Message");
toasty.warning("Warning Message");
toasty.error("Error Message");

5. Determine whether to invert the toast colors:

toasty.success("Success Message",{
  inverted: true
});

6. Override the default settings:

const toasty = {
  success: (message, options) => createToast("success", message, options),
  error: (message, options) => createToast("error", message, options),
  warning: (message, options) => createToast("warning", message, options),
  info: (message, options) => createToast("info", message, options),
  settings: {
    // auto dimiss after 5 seconds
    timer: 5000,
    // override icons and default messages here
    success: { icon: "fa-circle-check", defaultText: "success" },
    error: { icon: "fa-circle-xmark", defaultText: "error" },
    warning: { icon: "fa-triangle-exclamation", defaultText: "warning" },
    info: { icon: "fa-circle-info", defaultText: "info" },
  }
};