Advanced Toast & Snackbar Library Based On Bootstrap 5 – Toaststrap

Preview:

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.