Create Stylish, Customizable Toasts With The toast-cg Library

Category: Javascript , Notification | January 15, 2024
Author:CGWebDev2003
Views Total:137 views
Official Page:Go to website
Last Update:January 15, 2024
License:MIT

Preview:

Create Stylish, Customizable Toasts With The toast-cg Library

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,
});

You Might Be Interested In:


Leave a Reply