Create Stylish, Customizable Toasts With The toast-cg Library

Preview:

Description:

The toast-cg JavaScript Library provides a Toast class to display temporary, non-intrusive toast notifications on a web page.

It offers various toast types like success, error, warning, info to indicate different scenarios.

The toasts can be positioned at the top or bottom as per layout needs.

Custom icons and timeout durations provide further control.

How to use it:

1. Import the Toast from the ToastCG.js library.

import Toast from "./ToastCG.js";

<link rel="stylesheet" href="../ToastCG.css" />

2. Create a new Toast instance and config the toast message as follows:

const myToast = new Toast({
  // append the toast message to this container
  parent: document.body,
  
  // toast message
  text: "Test Toast",
  // "primary", "accent", "information", 
  // "success", "warning", or "error"
  style: "primary",
  // custom icon
  icon: "✨",
  // "left-top", "left-bottom", "right-top", or "right-bottom"
  position: "right-top",
  // auto-dismiss after this timeout
  time: 5000,
});