Toaster-JS
The simple vanilla JavaScript toast pop-up notifications module, which is fully CSS-customizable. The solution which "just works": add the module to your project and go further.
Supported by all major browsers. Safe to use with ReactJS and other virtual-dom frameworks.
Preview
See the demo here.
Features
- Fully CSS-customizable toast pop-ups for any design;
- No dependencies and
< 1kb
code; - Configurable toasts type and timeout;
- Fully configurable toast content (HTML, custom elements, etc).
Installation & Usage
Toaster-JS is primarily the uncompiled ES6 module. Install it with npm:
npm install toaster-js
Then, include it to your project:
; // const { Toast } = require("toaster-js/umd.js");; // 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. // Or draw your own styles! For instance, you can make toasts appear on the left by overwriting .toast { left: 0; right: auto; } // Simple toast"Welcome!"; // Typed toast (just a matter of CSS) with timeout"There is a lot of toasts!" ToastTYPE_ERROR ToastTIME_NORMAL; // Custom toast content example (you can also add something like close buttons, etc)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:
const Toast = ;
If you need to include the module with a script tag (for example, for demos), use this:
API
- toast = new Toast(content, type, timeout)
Toast.TIME_SHORT
(2000 ms)Toast.TIME_NORMAL
(4000 ms)Toast.TIME_LONG
(8000 ms, default)Toast.TYPE_INFO
Toast.TYPE_MESSAGE
Toast.TYPE_WARNING
Toast.TYPE_ERROR
Toast.TYPE_DONE
toast.delete()
- Deletes this toast from the DOM.
- configureToasts(options)
options.topOrigin = 0
- Anumber
in pixels of toasts Y-axis origin (negative values move toasts up).options.deleteDelay = 300
- Anumber
representing delay in milliseconds. When toast is deleted, it stays in DOM fordeleteDelay
more milliseconds. Useful with CSS animations.
deleteAllToasts()
- Deletes all toasts on the screen.
Toast(content, type, timeout)
Creates a new toast notification message on the screen. Pass a string content
to specify the
message text, type
= Toast.TYPE_*
to specify the type and timeout
= Toast.TIME_*
to specify
the timeout. Timeout constants are the numbers of milliseconds for message to stay on screen. For
example, new Toast("Baked!", Toast.TYPE_ERROR, 10000)
message will stay on the screen for 10
seconds.
TIME_SHORT
= 2 secondsTIME_NORMAL
= 4 secondsTIME_LONG
= 8 secondsTYPE_INFO
="info"
TYPE_MESSAGE
="message"
TYPE_WARNING
="warning"
TYPE_ERROR
="error"
TYPE_DONE
="done"
When content
is a valid DOM Element
, it will be attached to the message's body directly,
allowing you to customize toast however you want.
configureToasts(options)
Allows to configure some options of the toast. The available optional options are listed below:
;
Styles
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:
... ... ...
Contributing
Feel free to improve this project! Building the umd.js
and default.css
requires the following:
npm installnpm run build
License
MIT © Nikita Savchenko