Author: | brenoroosevelt |
---|---|
Views Total: | 374 views |
Official Page: | Go to website |
Last Update: | July 20, 2022 |
License: | MIT |
Preview:

Description:
Toast-js an open-source, zero-dependency, promise-based JavaScript Toast Notification plugin. It offers a wide range of configurable and flexible options (eg. changing the notification type, duration, and color), while still keeping it simple to use.
How to use it:
1. Install & download.
# NPM $ npm i @brenoroosevelt/toast
2. Import the Toast-js.
// ES6 + import toast from '@brenoroosevelt/toast'; // Browser import * as toast from "./lib/esm/toast.js";
3. Create toast messages.
toast.create ("Toast message", { // options here })
// OR toast.system("Toast Message", { // options here }) toast.info("Toast Message", { // options here }) toast.warning("Toast Message", { // options here }) toast.error("Toast Message", { // options here }) toast.success("Toast Message", { // options here })
4. All default options.
toast.create("Toast Message", { // default, system, error, info, warning, success type: 'default', // toast title title: undefined, // top, bottom position: 'top', // start, center, end align: 'end', // background color bgColor: '#333', // text color color: '#fff', // show close button closeBtn: true, // duration in ms duration: 10000, // z-index zIndex: 99999, // is dismissable? dismissible: true, // show shadow shadow: true, // animation speed animateIn: 200, animateOut: 150, // true: bottom // false: top append: true, // max width in px maxWidth: 600, /* add action buttons [{ text: string, value: any, bgColor?: string, color?: string }] */ actions: [], })
5. It returns a Promise which resolves when the user takes an action on the toast notification:
toast.create("Toast Message") .then((result) => console.log(result))
toast.create("Notification with action buttonss", { position: "top", actions: [ {text: "Yes", value: "ok"}, {text: "No", value: "no"}, ] }) .then((result) => { if (result.value === "ok") console.log("user says `yes`") if (result.value === "no") console.log("user says `no`") if (result.value === "click") console.log("user click to dismiss") if (result.value === "close-btn") console.log("user click close button") if (result.value === "timeout") console.log("notification has timed out") })