Advanced Toast & Snackbar Library Based On Bootstrap 5 – Toaststrap

Category: Javascript , Notification | November 21, 2021
Author:nawafscript
Views Total:33 views
Official Page:Go to website
Last Update:November 21, 2021
License:MIT

Preview:

Advanced Toast & Snackbar Library Based On Bootstrap 5 – Toaststrap

Description:

Toaststrap is an advanced customizable snackbar and toast library based on Bootstrap 5 styles.

Features:

  • Without Bootstrap 5 JS.
  • 7 notification types.
  • 4 position options.
  • Custom avatar.
  • Plays a sound effect if needed.
  • Shows a progress bar indicating the time left.
  • Dismissable or not.
  • Pausable or not.
  • RTL support.

How to use it:

1. Load the necessary Bootstrap 5’s stylesheet in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

2. Load the Toaststrap’s JavaScript and CSS files.

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

3. Create a new instance of the Toaststrap.

const myToast =  toaststrap({
      title: 'Toast Title',
      text: 'Toast Message',
})

4. Show the toast message.

myToast.show();

5. Set the position of the toast message.

  • TOP_START
  • TOP_END (Default)
  • BOTTOM_START
  • BOTTOM_END
const myToast =  toaststrap({
      title: 'Toast Title',
      text: 'Toast Message',
      position: toaststrap_position.TOP_START,
})

6. Specify the notification type.

  • DEFAULT
  • PRIMARY
  • INFO
  • WARNING
  • DANGER
  • DARK
  • SWEET
const myToast =  toaststrap({
      title: 'Toast Title',
      text: 'Toast Message',
      type: toaststrap_type.DEFAULT,
})

7. Add an avatar to the toast message.

const myToast =  toaststrap({
      title: 'Toast Title',
      text: 'Toast Message',
      avatar: '/path/to/avatar.svg', 
})

8. Determine whether to play a sound effect.

const myToast =  toaststrap({
      title: 'Toast Title',
      text: 'Toast Message',
      soundable: true,
      soundSource: '/path/to/ring.mp3',
})

9. More configuration options.

const myToast =  toaststrap({
      title: 'Toast Title',
      text: 'Toast Message',
      // parent container
      parent: "body",
      // show/hide header
      snackbar: false,
      // is dismissable?
      dismissible: false,
      // is pausable?
      pausable: true,
      // shows progress bar
      progress: true,
      // Parent node
      parent: 'body',
      // Subtitle
      subtitle: {
        // Toaststrap birthday
        datetime: "11-20-2021",
        relative: true,
      },
      // Duration in ms
      duration: 5,
      // Space between toast messages
      offset: 10,
})

10. Callback functions.

const myToast =  toaststrap({
      onClose: (toast) => {
        toast.options.snackbar = true;
        toast.options.text = "Please wait....";
        toast.options.type = "WARNING";
        toast.options.duration = 3500;
        setTimeout(() => {
          window.location.href = "https://google.com"
        }, 3000)
        toast.show();
      },
      onShow: (toast) => {
        // do something
      }
})

Changelog:

v1.1.0 (11/21/2021)

  • snackbar attribute.
  • onClose hook.
  • onShow hook.
  • subtitle attribute.
  • offset attribute.
  • Added type-checking for browsers version.
  • Added show a progress-bar in snackbar version.
  • Added the ability to set a subtitle or relative date.
  • Attribute datetime deprecated and no longer used. (Alternative option subtitle).
  • Attribute noHeader deprecated and no longer used. (Alternative option snackbar).
  • Attribute onCloseCallBack deprecated and no longer used. (Alternative option onClose hook).
  • Attribute space deprecated and no longer used (Alternative option offset).
  • The libraries uuid and dayjs have been removed, I wrote a small code that serves the same purpose.
  • The progress bar has been improved! I used css effects instead of javascript intervals.

You Might Be Interested In:


Leave a Reply