Easy Toast Notifications For The Web – Themtfy

Category: Javascript , Notification | April 25, 2024
Author:AmiraliMotahari
Views Total:46 views
Official Page:Go to website
Last Update:April 25, 2024
License:MIT

Preview:

Easy Toast Notifications For The Web – Themtfy

Description:

Themtfy is a lightweight JavaScript library that helps developers create toast notifications with custom titles, body text, and icons.

Choose from various notification variations (success, warning, error, info) to visually communicate the message type. It also offers fine-grained control over positioning (top, center, bottom) for optimal placement on your webpage.

How to use it:

1. Install the Themtfy library via NPM:

# NPM
$ npm install themtfy

2. Import Themtfy into your project along with the necessary styles:

import Themtfy from 'themtfy';
import "path/to/themtfy/dist/style.css";

3. To create a toast notification, create a new instance of Themtfy and pass in your desired options. You can customize the position, title, body text, icon, variation (color scheme), auto-close time, close callback function, manual close option, and progress bar visibility.

const toast = new Themtfy({
  position: "top-right", // "top-right", "top-center", "top-left", "center-right", "center-center", "center-left", "bottom-right", "bottom-center", "bottom-left"
  title: "Your title goes here",
  body: "Your text goes here.",
  icon: "default", // "default", "success", "warning", "error", "info"
  variation: "default", // "default", "success", "warning", "error", "info"
  autoClose: 1000,
  onClose: () => {},
  canClose: true,
  showProgress: true,
  backgroundColor: false,
  textColor: false,
  distanceX: false,
  distanceY: false,
});

You Might Be Interested In:


Leave a Reply