Author: | AlexKvazos |
---|---|
Views Total: | 1,463 views |
Official Page: | Go to website |
Last Update: | March 3, 2022 |
License: | MIT |
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