Modern Toast Popup JavaScript Library – EggyJS

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