ziko-toaster/src/index.js

Lightweight toast notification library

function createToast(message, type = "info", duration = 3000) {
  const toast = document.createElement("div");
  toast.className = `my-toast ${type}`;
    const icon = document.createElement("i");
  icon.className = getIconClass(type);
  toast.innerHTML = `<span class="toast-icon">${icon.outerHTML}</span><span class="toast-msg">${message}</span>`;

  document.body.appendChild(toast);

  requestAnimationFrame(() => {
    toast.classList.add("show");
  });
  toast.querySelector(".toast-icon").addEventListener("click", (e) => {
    toast.classList.remove("show");
  });
  setTimeout(() => {
    toast.classList.remove("show");
  }, duration);
  function getIconClass(type) {
  switch (type) {
    case "success":
      return "fas fa-check-circle";
    case "error":
      return "fas fa-times-circle";
    case "warn":
      return "fas fa-exclamation-triangle";
    case "info":
    default:
      return "fas fa-info-circle";
  }
}
}

document.getElementById("cl").addEventListener("click",()=>{
  createToast("Hello","warn")
})
export default createToast;