An0nymusA/JustToast

Simple toasts using plain js / html

JustToast

Demo

Installation

Include script.js and style.css in your html

Usage

toast.success(...)

toast.success("Success message");

toast.error(...)

toast.error("Error message");

toast.info(...)

toast.info("Simple message");

toast.promise(...)

toast.promise(promise, {
  success: "Promise resolved",
  error: "Promise rejected",
  loading: "Waiting for promise",
});

Customization

toast.updateStyles(...)

toast.updateStyles({
  red: {
    text: "#FFFFFF",
    bg: "#D45454",
    border: "",
  },
  green: {
    text: "#FFFFFF",
    bg: "#2FE075",
    border: "",
  },
  other: {
    text: "#FFFFFF",
    bg: "#3F3F3F",
    border: "",
  },
});

toast.setPosition(vertical, horizontal)

toast.setPosition("top", "left");

toast.reverseOrder

toast.reverseOrder = true; // Most recent toasts will be on top
toast.reverseOrder = false; // Most recent toasts will be on bottom

toast.icons

toast.icons = {
  info: "<svg></svg>",
  success: "<svg></svg>",
  errror: "<svg></svg>",
  loading: "<svg></svg>",
};