Supported by all major browsers. Safe to use with ReactJS and other virtual-dom frameworks.
Toaster-JS is primarily ES6 module. Install it with NPM:
npm install toaster-js
Then, include it to your project:
;; // Assuming CSS/SCSS loader is present// Import styles from SCSS: @import "../node_modules/toaster-js/default.scss";// Or just copy default styles to your project from node_modules/toaster-js/default.*css."Welcome!";"There is a lot of toasts!" ToastTYPE_ERROR ToastTIME_NORMAL;let element = document;elementtextContent = "You can pass any HTML elements to Toast. Clicking on this one deletes it!";let newToast = element ToastTYPE_MESSAGE;element; // delete a toast on message click!
You can set up additional options if you need. See the API section below for more details.
;;; // just deletes all toasts on the screen
If you need to load ES5 (UMD) module, use the following:
let Toast = ;
If you need to include the module with a script tag (for example, for demos), use this:
Toast.TIME_LONG(8000 ms, default)
toast.delete()- Deletes this toast from the DOM.
options.topOrigin = 0- A
numberin pixels of toasts Y-axis origin (negative values move toasts up).
options.deleteDelay = 300- A
numberrepresenting delay in milliseconds. When toast is deleted, it stays in DOM for
deleteDelaymore milliseconds. Useful with CSS animations.
deleteAllToasts()- Deletes all toasts on the screen.
Creates a new toast notification message on the screen. Pass a string
content to specify the
Toast.TYPE_* to specify the type and
Toast.TIME_* to specify
the timeout. Timeout constants are the numbers of milliseconds for message to stay on screen. For
new Toast("Baked!", Toast.TYPE_ERROR, 10000) message will stay on the screen for 10
TIME_SHORT= 2 seconds
TIME_NORMAL= 4 seconds
TIME_LONG= 8 seconds
content is a valid DOM
Element, it will be attached to the message's body directly,
allowing you to customize toast however you want.
Allows to configure some options of the toast. The available optional options are listed below:
Import default toast styles from
node_modules/toaster-js/default.*css (CSS, SCSS are available).
To style the toast properly, consider that toast elements (for example,
info toasts) have three
states: empty state (when the toast attaches to the DOM),
displayed state (when the toast is moved
to its proper position), and
deleted state, when the toast "fades out" from the DOM. You can
control how much time the toast stays in
deleted state until it disappears using
deleteDelay option. States:
Feel free to improve this project! Building the
default.css requires the following:
npm installnpm run build
MIT © Nikita Savchenko