Customizable Toast Alert For The Web – AlertHub

AlertHub is a lightweight JavaScript library for creating customizable, toast-like alert messages in your web applications.

It currently provides 6 preset alert types – primary, info, success, warning, danger, and dark. The alerts can fade in, slide in from any direction.

How to use it:

1. Download the package and import the AlertHub’s files.

# NPM
$ npm i alerthub --save

<link rel="stylesheet" href="/dist/css/Alerthub.min.css">
<script src="/dist/js/alerthub.min.js"></script>

2. Create a new AlertHub and pass the following parameters as needed:

const instance = new AlertHub({
       
      // top-right, bottom-right, top-left, bottom-left
      position: "top-right",
      // primary, info, success, warning, danger, dark
      type: "info",
      // auto-dismiss after 2 seconds
      timeout: 2,
      // shows close button
      closeButton: true,
      // in px
      closeButtonSize: 20,
      // fade-in, slide-in, slide-in-right, slide-in-left
      animation: "no-animation",
      // custom alert icon
      icon: "",
      
});

3. Display an alert message on the page.

instance.showAlert({
  // alert title
  title: "Alert Title",
  // alert message
  description: "Alert Message"
   
  // top-right, bottom-right, top-left, bottom-left
  position: "top-right",
  // primary, info, success, warning, danger, dark
  type: "info",
  // auto-dismiss after 2 seconds
  timeout: 2,
  // shows close button
  closeButton: true,
  // in px
  closeButtonSize: 20,
  // fade-in, slide-in, slide-in-right, slide-in-left
  animation: "no-animation",
  // shows alert icon or not
  showIcon: true,
  // custom alert icon
  icon: "",
});

4. Add icons to the alerts.

class icon {
  SuccessIcon() {
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    svg.setAttribute("fill", "none");
    svg.style.width = '25px'
    svg.style.marginRight = '10px'
    svg.setAttribute("viewBox", "0 0 24 24");
    svg.setAttribute("stroke-width", "1.5");
    svg.setAttribute("stroke", "currentColor");
    svg.setAttribute("class", "w-4 h-4");
    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute("stroke-linecap", "round");
    path.setAttribute("stroke-linejoin", "round");
    path.setAttribute("d", "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z");
    // Append the path element to the SVG element
    svg.appendChild(path);
    // Return the created SVG element
    return svg;
  }
  ErrorIcon() {
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    svg.setAttribute("fill", "none");
    svg.style.width = '25px'
    svg.style.marginRight = '10px'
    svg.setAttribute("viewBox", "0 0 24 24");
    svg.setAttribute("stroke-width", "1.5");
    svg.setAttribute("stroke", "currentColor");
    svg.setAttribute("class", "w-4 h-4");
    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute("stroke-linecap", "round");
    path.setAttribute("stroke-linejoin", "round");
    path.setAttribute("d", "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z");
    // Append the path element to the SVG element
    svg.appendChild(path);
    // Return the created SVG element
    return svg;
  }
  InfoIcon() {
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    svg.setAttribute("fill", "none");
    svg.style.width = '25px'
    svg.style.marginRight = '10px'
    svg.setAttribute("viewBox", "0 0 24 24");
    svg.setAttribute("stroke-width", "1.5");
    svg.setAttribute("stroke", "currentColor");
    svg.classList.add("w-6", "h-6");
    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute("stroke-linecap", "round");
    path.setAttribute("stroke-linejoin", "round");
    path.setAttribute(
        "d",
        "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
    );
    svg.appendChild(path);
    return svg;
  }
}