Create Clean Customizable Toast Notices With sh-toastr

Preview:

Description:

sh-toastr is a tiny and simple JavaScript library to display customizable, non-intrusive toast notifications on the web.

These notifications can be of four types: Success, Danger, Warning, and Info. They can be positioned at the top or the bottom of the web page.

Developers can set custom timeouts, controlling the duration before the notifications are auto-dismissed.

Optionally, each toast notification comes with a countdown progress bar, giving users a visual cue about its duration.

How to use it:

1. Import both the JavaScript and the Stylesheet of ‘sh-toastr’ into your document.

<link rel="stylesheet" href="css/sh_toaster.css">
<script src="js/sh_toaster.js"></script>

2. Create empty DIV containers to hold your toast notifications:

<div class="sh-toast-container" id="shToastContainerTop"></div>
<div class="sh-toast-container" id="shToastContainerBottom"></div>

3. Utilize the following syntax to display the different types of toast notifications:

Toast.success('Success! This is a success message.');
Toast.danger('Danger! This is a Danger message.');
Toast.warning('Warning! This is a Warning message.');
Toast.info('Info! This is an Info message.');

4. Determine whether to show a countdown progress bar under the toast notification.

Toast.success('Success! This is a success message.',{
  showProgress: true,
});

5. Set the position of the toast notification: ‘top’ or ‘bottom’.

Toast.success('Success! This is a success message.',{
  toastLocation: 'top'
});

6. Customize the timeout i ms.

Toast.success('Success! This is a success message.',{
  duration:  5000,
});