Author: | S-R0 |
---|---|
Views Total: | 2,160 views |
Official Page: | Go to website |
Last Update: | August 9, 2021 |
License: | MIT |
Preview:

Description:
A modern, fast, zero-dependency JavaScript notification library for displaying toast-style notification popups on the web app.
Features:
- 4 notification types: ‘success’, ‘warning’, ‘info’ and ‘error’.
- Easy to style using your own CSS.
- Built-in progress bars indicating the remaining time.
- Auto stack when there are multiple toast popups.
- Custom icons.
How to use it:
1. Install and import the EggyJS library.
# NPM $ npm i @s-r0/eggy-js --save
import { Eggy } from '@s-r0/eggy-js';
2. You can manually install the library by inserting the following files into your document.
<!-- Core Stylesheet --> <link rel="stylesheet" href="css/eggy.css" /> <!-- Progressbar Styles --> <link rel="stylesheet" href="css/progressbar.css" /> <!-- Themes --> <link rel="stylesheet" href="css/theme.css" />
import { Eggy } from './js/eggy.js';
3. Display a basic toast popup on the screen.
Eggy({ title: 'Toast Title', message: 'Toast Message', }); // or asynchronously await Eggy({ title: 'Toast Title', message: 'Toast Message', });
4. Set the position of the toast popup.
- ‘top-right’ (default)
- ‘top-left’
- ‘bottom-right’
- ‘bottom-left’
await Eggy({ title: 'Toast Title', message: 'Toast Message', position: 'top-right', });
5. Set notification type
- ‘success’ (default)
- ‘warning’
- ‘info’
- ‘error’
await Eggy({ title: 'Toast Title', message: 'Toast Message', type: 'error', });
6. Determine how long the toast popup should stay on the screen. Default: 5000ms.
await Eggy({ title: 'Toast Title', message: 'Toast Message', duration: 3000, });
7. Disable the default styles and then you can create your own styles and animations.
await Eggy({ title: 'Toast Title', message: 'Toast Message', styles: false, });
8. Determine whether to show a progress bar inside the toast popup. Default: true.
await Eggy({ title: 'Toast Title', message: 'Toast Message', progressBar: false, });
9. Trigger a function after the toast popup has been initialized.
Eggy().then((eggytoast) => { // do something }); // or let eggytoast = await Eggy(); eggytoast.classList.add('custom-css');