Easy JS Library For Toast Notifications – Toasting

Category: Javascript , Notification | December 28, 2022
Author:tharith-p
Views Total:485 views
Official Page:Go to website
Last Update:December 28, 2022
License:MIT

Preview:

Easy JS Library For Toast Notifications – Toasting

Description:

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

You Might Be Interested In:


Leave a Reply