Modern Toast Popup JavaScript Library – EggyJS

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

Preview:

Modern Toast Popup JavaScript Library – EggyJS

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');

You Might Be Interested In:


Leave a Reply