Easy JS Library For Toast Notifications – Toasting

Category: Javascript , Notification | August 3, 2021
Author:tharith-p
Views Total:186 views
Official Page:Go to website
Last Update:August 3, 2021
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,
});

You Might Be Interested In:


Leave a Reply