Create Bootstrap 5 Toasts Dynamically – bs-toaster

bs-toaster is a vanilla JavaScript library for dynamically creating and manipulating Bootstrap 5 toasts on the web app.

How to use it:

1. Load the necessary Bootstrap 5 framework.

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

2. Install and import the bs-toaster components.

# Yarn
$ yarn add bs-toaster

# NPM
$ npm i bs-toaster

import {
  Toaster,
  ToasterPosition,
  ToasterTimer,
  ToasterType,
} from "bs-toaster";

3. Initialize the bs-toaster.

const myToaster = new Toaster();

4. Display a toast with a custom title & message on the screen.

myToaster.create("Title", "Message Here");

5. Customize the toast.

myToaster.create("Title", "Message Here", {
  // DEFAULT, SUCCESS, DANGER, INFO, PRIMARY, WARNING, DARK
  type: ToasterType.DANGER,
  // ELAPSED, COUNTDOWN
  timer: ToasterTimer.COUNTDOWN,
  // Delay hiding the toast (ms)
  delay: 5000,
  // Enable/disable animation
  animation: false,
  // Custom toast icon
  defaultIconMarkup: '<i class="p-2 me-2 rounded %TYPE%"></i>',
})

6. You can also pass the options to the Toaster function during init.

const myToaster = new Toaster({
  // DEFAULT, SUCCESS, DANGER, INFO, PRIMARY, WARNING, DARK
  type: ToasterType.DANGER,
  // ELAPSED, COUNTDOWN
  timer: ToasterTimer.COUNTDOWN,
  // Delay hiding the toast (ms)
  delay: 5000,
  // Enable/disable animation
  animation: false,
  // Custom toast icon
  defaultIconMarkup: '<i class="p-2 me-2 rounded %TYPE%"></i>',
});

The post Create Bootstrap 5 Toasts Dynamically – bs-toaster appeared first on CSS Script.