A JavaScript Library For Simple Toast Popups Based On Bootstrap 5 | Toaststrap

Toaststrap is a simple and lightweight JavaScript library for popups. Uses bootstrap 5 styles.

Created this library for everyone who uses Bootstrap 5 and wants to show some nice notifications to their users.

Features

  •  Pure JavaScript without jQuery.
  •  🇸🇦 RTL support.
  •  Easy to initialize and use.
  •  🆙 Support sound.
  •  Quick and efficient.
  •  🎨 Customizable.
  •  🆙 Maintainable and up-to-date.

Check Here – JavaScript Library for Simple and Lightweight Toast Popups | EggyJS

How to make use of it:

1. Load the necessary Bootstrap 5 stylesheet into the document.

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

2. Load Toaststrap’s JavaScript and CSS files.

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

3. Create a new instance of Toaststrap.

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

4. Show a toast message.

myToast.show();

5. Set the position of the toast message.

const myToast =  toaststrap({
      title: 'Toast Title',
      text: 'Toast Message',
      position: window.toaststrap_position.TOP_START,
})

6. Determine the type of notification.

const myToast =  toaststrap({
      title: 'Toast Title',
      text: 'Toast Message',
      type: window.toaststrap_type.DEFAULT,
})

7. Add an avatar to a toast message.

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

8. Decide if you want 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',
      // show/hide toast header
      noHeader: false,
      // is dismissable?
      dismissible: false,
      // is pausable?
      pausable: true,
      // shows progress bar
      progress: true,
      // Parent node
      parent: 'body',
      // Show date
      datetime: '2012-01-01T00:00',
      // Duration in ms
      duration: 5,
      // Space between toast messages
      space: 5,
})

Advanced Toast Message Library Based On Bootstrap 5, Toaststrap Plugin/Github, bootstrap toast success message, bootstrap toast notification jquery

Read More – 

Bootstrap 4 Toasts Notification with Vue Component
Notiflix Notification, Popup Boxes, Loading Indicators, and More in JavaScript Library


See Demo And Download

Official Website(nawafscript): Click Here

This superior jQuery/javascript plugin is developed by nawafscript. For extra Advanced usage, please go to the official website.

Share