Press "Enter" to skip to content

JavaScript Library for Simple and Lightweight Toast Popups | EggyJS

EggyJS is a small, lightweight popup javascript library for displaying notification popups on a web application.

toast notification jquery, toast notification animation, toaster in js, toast library javascript, vanilla toast js, toastify js, toast message jquery

Features:

  • 4 types of notifications: ‘Success’, ‘Warning’, ‘Information’ and ‘Error’.
  • Easy to design with your own CSS.
  • Built-in progress bars indicate the remaining time.
  • Auto stack when there are many toasted popups.
  • custom icons.

Important information when using

In order for EggyJS to behave as expected, the following must be met upon use.

EggyJS comes up with a promise, but when it’s first initialized, it checks to see if the div is in the desired position first before building. This is done so that there are no traces of HTML or CSS on the page when it is loaded, to avoid any speed issues. To run multiple EggyJS toasts in the same position, this must be done concurrently.

The first instance of EggyJS must be resolved before trying to add another toast in the same position. Failing to run multiple pieces of bread simultaneously will result in 2 toasts being stacked directly on top of each other, making only 1 visible.

How to make use of 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 set up the library by inserting the next information into your doc.

<!-- 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 primary toast popup on the display screen.

Eggy({
  title:  'Toast Title',
  message:  'Toast Message',
});

// or asynchronously
await Eggy({
  title: 'Toast Title',
  message: 'Toast Message',
});

4. Set the place of the toast popup.

await Eggy({
  title: 'Toast Title',
  message: 'Toast Message',
  position: 'top-right',
});

5. Set notification sort.

await Eggy({
  title: 'Toast Title',
  message: 'Toast Message',
  type: 'error',
});

6. Determine how lengthy the toast popup should keep on the display screen.

await Eggy({
  title: 'Toast Title',
  message: 'Toast Message',
  duration: 3000,
});

7. Disable the default kinds after which you possibly can create your personal kinds and animations.

await Eggy({
  title: 'Toast Title',
  message: 'Toast Message',
  styles: false,
});

8. Determine whether or not to point out a progress bar contained in the toast popup.

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

Options

Param | Type | Default | Details

———— | ————- | ————- | ————-

title | string/boolean | 'Success' | The title that gets displayed at the top of the notification. Can be removed by providing false.

message | string/boolean | 'Task complete successfully!' | The main message inside the notification. Can be removed by providing false.

position | string | 'top-right' | Options avaiable are 'top-right''top-left''bottom-right' and 'bottom-left'

type | string | 'success' | Options available are 'success''warning''info' and 'error'

duration | integer | 5000 | Duration of the toast notification in milliseconds

styles | boolean | true | Enable the provided styling for the notifications. If set to false, the basic animation and positioning styles will still be applied, but no ‘theme’ styles will be added.

progressBar | boolean | true | Enable progress bars. The progress bars will be animated and the duration matches the duration of each individual eggy popup. The html only for the progress bar will be added if styles is set to false, so custom styling can be applied.

Modern Toast Popup JavaScript Library, EggyJS Plugin/Github


See Demo And Download

Official Website(S-R0): Click Here

This superior jQuery/javascript plugin is developed by S-R0. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.