Minimal, Stackable, Non-intrusive Toast Notification Library – Toasty

Category: Javascript , Notification | April 5, 2024
Author:felconca
Views Total:1,049 views
Official Page:Go to website
Last Update:April 5, 2024
License:MIT

Preview:

Minimal, Stackable, Non-intrusive Toast Notification Library – Toasty

Description:

Yet another notification JavaScript library designed to display sleek, dismissible toast messages on the center top of your webpage.

These toast messages can be customized with a title, message, and even a custom icon, all with a configurable timeout. The smooth slide and fade transitions ensure a polished and non-intrusive user interface.

The library also has the ability to display multiple toast notifications in a stackable fashion, which means you can send several messages without overwhelming or confusing your audience.

How to use it:

1. Load the main script toasty.js and core stylesheet toasty.css in the document.

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

2. Display a toast message on the screen using the Toasty.showToast() function. Available parameters:

  • title: Toast title. Required.
  • message: Toast message. Required.
  • icon: HTML for custom icons.
  • timer: How long the message appears before it fades away. Default: 3000ms.
// Toasty.showToast(title, message, icon, timer)
Toasty.showToast('Duplicated Entry', 'The system detected a duplicate item attempted to add. Please always check the doctor before adding it', '<i class="fas fa-exclamation-circle"></i>', 5000);

You Might Be Interested In:


Leave a Reply