Author: | AlexSegen |
---|---|
Views Total: | 143 views |
Official Page: | Go to website |
Last Update: | September 3, 2021 |
License: | MIT |
Preview:

Description:
toastmejs is a lightweight, easy, flexible, customizable toast notification library in vanilla JavaScript.
Features:
- Plain and light themes.
- Custom icons.
- Position variables.
- Custom timeout.
- Success/Error/Warning/Info types.
How to use it:
Install & import.
# NPM $ npm install toastjs --save
import toastme from 'toastjs'
Or directly load the following JS & CSS files in the document.
<link rel="stylesheet" href="./dist/css/toastme.css"/> <script src="./dist/js/toastme.js" ></script>
Create a new toastme instance.
const myToast = new Toastme();
Create the toast notification.
myToast.default("This is a 'default' notification") myToast.success("This is a 'success' notification") myToast.error("This is an 'error' notification") myToast.warning("This is a 'warning' notification") myToast.info("This is an 'info' notification")
Config the toast notification by overriding the default parameters as follows:
const myToast = new Toastme({ timeout: 5000, distanceX: 15, distanceY: 15, positionY: "bottom", // or 'top' positionX:" right", // or 'left', 'center' zIndex: 100, ligh: false // light theme? });
Changelog:
v1.2.7 (09/03/2021)
- HotFix: Fix wrong export
v1.2.5 (08/30/2021)
- Hotfix: Remove deprecated browserList config
v1.2.4 (08/17/2021)
- Fix: Dialog height broken
- Fix: Default list-style showing in some browsers
- Updated: Notification and dialog styles
v1.2.3 (05/07/2019)
- CSS Rules fixes and updates
v1.2.1 (05/07/2019)
- Added: babel transpiler
- Fix: change notification box size according to the text
v1.2.0 (05/03/2019)
- Improve CSS Positioning
v1.1.0 (05/03/2019)
- Added stackable notification support.
05/01/2019
- Added missing default notification
04/30/2019
- Various fixes and improvements
04/18/2019
- Add dialog