Easy JS Library For Toast Notifications – Toasting

Yet another toast JavaScript library for displaying toast notifications with progress bars on the page.

More Features:

• 5 notification types.
• 6 progress bar styles.
• Auto dismiss or not.

How to use it:

1. Import the stylesheet toasting.css and JavaScript toasting.js into the page.

<link rel=”stylesheet” href=”dist/css/toasting.css” />
<script src=”dist/js/toasting.js”></script>

2. Create a default toast notification on the page.

toasting.create({
  "title": "Toast Title",
  "text": "Some toast text here",
});

3. Determine the notification type:

• default
• success
• warning
• error
• info

toasting.create({
  "title": "Toast Title",
  "text": "Some toast text here",
  "type": "success",
});

4. Determine the progress bar style

• default
• success
• warning
• error
• info
• rainbow

toasting.create({
  "title": "Toast Title",
  "text": "Some toast text here",
  "progressBarType": "rainbow",
});

5. Determine how long the toast notification should last. Default: 4000ms.

toasting.create({
  "title": "Toast Title",
  "text": "Some toast text here",
  "timeout": 5000,
});

6. Determine whether to make the toast notification Sticky, which means that the toast notification will never auto dismiss until clicked.

toasting.create({
  "title": "Toast Title",
  "text": "Some toast text here",
  "autoHide": false,
});

7. Determine whether to hide the progress bar. Default: false.

toasting.create({
  "title": "Toast Title",
  "text": "Some toast text here",
  "hideProgressBar": true,
});

8. Determing to pause the timer on hover.

toasting.create({
  "title": "Toast Title",
  "text": "Some toast text here",
  "isHoverToPause": true,
});

Changelog:

12/28/2022

• improve hover to pause

07/04/2022

• improve progress bar rainbow style

07/02/2022

• add Hover To Pause