Customizable Toast Notification Manager For Bootstrap 5 – use-bootstrap-toaster

Preview:

Description:

use-bootstrap-toaster is a lightweight and simple JavaScript library to easily create and customize toast notifications in your Bootstrap 5 project.

You can display custom HTML content, control the placement and stacking of your toasts, and even add animations and delays.

How to use it:

1. Install and import the library into your Bootstrap project using NPM:

npm install use-bootstrap-toaster

import toast from 'use-bootstrap-toaster'

2. Alternatively, include the IIFE bundle directly in your HTML:

<!-- Bootstrap Framework -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- use-bootstrap-toaster -->
<script src="/path/to/dist/use-bootstrap-toaster.min.js"></script>

3. Create a basic toast notification with the toast() method.

toast('This is a basic toast message.');
toast('It supports <b>HTML</b> Content.');

4. Create a customizable toast message. You can control various aspects of your toasts, including:

• Header: Add an icon, title, timestamp, and close button.
• Body: The main content of your toast message.
• Animation: Enable or disable the fade transition effect.
• Autohide: Set whether the toast should disappear automatically after a certain time.
• Delay: Control how long the toast stays visible before auto-hiding.
• Gap & Margin: Specify the space between toasts.
• Placement: Choose the corner position of the toast: top-right, top-left, bottom-right, bottom-left
• Classes: Add Bootstrap utility classes or your own CSS classes to the toast.

toast({
  header: {
    icon: '<svg width="1.5em" height="1.5em" class="text-success me-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
    title: 'Toast Header',
    ago: '11 mins ago',
    closeBtn: true,
  },
  body: 'Body Message',
  animation: true,
  autohide: true,
  delay: 4000,
  gap: 16, // in px
  margin: "1rem",
  placement: "top-right", // top-right, top-left, bottom-right, bottom-left
  classes: "", // Bootstrap utility classes or your own classes
})