JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.1.0/remixicon.min.css">
<div class="container toast-container m-4">
  <div class="row">
    <div class="col">
      <button type="button" class="btn btn-primary" data-toast-type="info" data-toast-title="Hello World" data-toast-message="Welcome to the Jungle" data-toast-position="top-right">
        Toaster One
      </button>
    </div>
    <div class="col">
      <button type="button" class="btn btn-success" data-toast-type="success" data-toast-title="Hello World" data-toast-message="Welcome to the Jungle" data-toast-position="top-right">
        Toaster Two
      </button>
    </div>
    <div class="col">
      <button type="button" class="btn btn-warning" data-toast-type="warning" data-toast-title="Hello World" data-toast-message="Welcome to the Jungle" data-toast-position="top-right">
        Toaster Three
      </button>
    </div>
    <div class="col">
      <button type="button" class="btn btn-danger" data-toast-type="error" data-toast-title="Hello World" data-toast-message="Welcome to the Jungle" data-toast-position="top-right">
        Toaster four
      </button>
    </div>

  </div>
</div>

CSS

/*

AIT TOAST CSS
Author: AIT PVH
copyright: ARCHIFACT BV
Version: 1.0.0

using bootstrap 5.x toast component
using fontawesome 5.x icons OR remixicon icons


*/
:root {
  --toast-default-color: #fefefe;
  --toast-error-color: #f44336;
  --toast-warning-color: #ff9800;
  --toast-info-color: #2196f3;
  --toast-success-color: #4caf50;
  --toast-text-flat-color: #fff;
  --toast-opacity: 0.9;
  --toast-border-radius: 0.25rem;
}

.toast-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 1em;
}
.ait-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  padding: 1em 0.5em;
  background-color: var(--toast-default-color);
  opacity: var(--toast-opacity);
  box-shadow: var(--elevation-6dp);
  transition: all linear 0.3s;
  min-width: 350px;
  max-width: 400px;
  width: 100%;
}

.ait-toast .toast-icon {
  flex: 0;
  color: var(--toast-default-color);
}
.ait-toast .toast-icon i {
  font-size: 1.5rem;
}

.ait-toast .toast-body {
  flex: 1 1 auto;
  padding: 0;
}

.ait-toast .toast-body .toast-title {
  font-size: 1rem;
  font-weight: 600;
}
.ait-toast .toast-body .toast-message {
  font-size: 0.8rem;
  font-weight: 400;
}

.ait-toast .btn-close {
  padding: 1em;
  color: var(--toast-text-flat-color);
}

.ait-toast.info .toast-icon {
  color: var(--toast-info-color);
}
.ait-toast.success .toast-icon {
  color: var(--toast-success-color);
}
.ait-toast.error .toast-icon,
.ait-toast.alert .toast-icon {
  color: var(--toast-error-color);
}
.ait-toast.warning .toast-icon {
  color: var(--toast-warning-color);
}

.ait-toast.flat.success {
  background-color: var(--toast-success-color);
  color: var(--toast-text-flat-color);
}

.ait-toast.flat.error,
.ait-toast.flat.alert {
  background-color: var(--toast-error-color);
  color: var(--toast-text-flat-color);
}

.ait-toast.flat.warning {
  background-color: var(--toast-warning-color);
  color:...

JavaScript

/*
 Bootstrap 5.x Toast (ait-toast) Generator:
 author: AIT PVH
 copyrigth: Archifact BV.
 version: 1.0.0
 created: 05-12-2023


    - Create a new instance of the ToastGenerator class
    - Call the addToQueue() method with an options object
    - The options object can contain the following properties:
        - type: *info / success / warning / error / alert
        - title: The title of the toast, leave empty for simple toast
        - body: The body of the toast       
        - dismissible: Whether the toast is dismissible or not
        - position: The position of the toast on the screen (top-left / top-right / top-center / bottom-left / bottom-right / bottom-center / middle-left / middle-right / middle-center)
        - autohide: Whether the toast should autohide or not
        - delay: The delay before the toast autohides
    - The toast will be shown automatically when it's its turn in the queue
    - The toast will be removed from the DOM when it's hidden
    - The toast queue will be processed until it's empty


// Example usage
  const toastGenerator = new ToastGenerator();

  toastGenerator.addToQueue({
    type: 'success', // types: *info / success / warning / error / alert
    mode: 'flat', // modes: flat / outline / ghost
    title: 'Success Toast', // leave title empty for simple toast
    body: 'Operation completed successfully!', 
    showIcon: true, 
    dismissible: true,
    position: 'top-end',
    autoHide: true,
    delayTime: 5000,
    toastContainer: 'toast-wrapper-container' // optional, if not set, toast will be added to body
  });

*/

class ToastGenerator {
  constructor() {
    // create toast container:
    if (document.querySelector(".toast-container") == null) {
      this.toastContainer = document.createElement("div");
      this.toastContainer.classList.add("toast-container");
      this.toastContainer.setAttribute("aria-live", "polite");
      document.body.appendChild(this.toastContainer);
    } else {
     ...