Launch Week Day 1: Socket for Jira Is Now Available.Learn More
Socket
Book a DemoSign in
Socket

itstoaster

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

itstoaster

A lightweight toast notification package for JavaScript

latest
Source
npmnpm
Version
1.1.1
Version published
Maintainers
1
Created
Source

🔔 itstoaster

A lightweight, theme-aware, and customizable toast notification system — built for modern web apps.

📦 Installation

npm install itstoaster

or

yarn add itstoaster

🛠️ Usage

1. Import JavaScript and CSS

import { Toaster } from "itstoaster";
import "itstoaster/style.css";

2. Create a toast instance

const toast = new Toaster({
  containerId: "custom-toast-container", // optional
  stack: 5 // optional: max number of toasts visible at once
});

3. Show a toast

toast.success({
  title: "Success!",
  description: "Your settings have been saved.",
  duration: 3000, // optional (default: 3000ms)
  dismissable: true, // optional
  position: "top-right" // optional: top-left, top-center, top-right
});

toast.warning({
  title: "Warning!",
  description: "Your action might have unintended consequences.",
  duration: 5000, // optional
  dismissable: false, // optional
  position: "top-center" // optional
});

toast.error({
  title: "Error!",
  description: "Something went wrong.",
  duration: 4000, // optional
  dismissable: true, // optional
  position: "top-left" // optional
});

toast.info({
  title: "Information",
  description: "This is some informational text.",
  duration: 4000, // optional
  dismissable: true, // optional
  position: "top-left" // optional
});

⚙️ Toast Options

OptionTypeDefaultDescription
titlestring | nullnullOptional title text
descriptionstring | nullnullOptional description
durationnumber | false3000How long toast stays (in ms). Use false to disable auto-dismiss
dismissablebooleanfalseShow a close button
positionstringtop-rightOne of: top-left, top-center, top-right
iconstringBased on typeOverride the default icon (see below)

🌈 Theme Support

  • Automatically follows system theme
  • To force dark mode, add to your <html> tag:
<html data-theme="dark">

🌟 Default Icons

TypeIcon name
successcheck_circle
warningexclamation_circle
errortriangular_error
infoinfo_circle
closecross

✅ You can override any icon by passing a custom icon name in the icon option.

📍 Positioning

Toasts can be positioned at:

  • top-left
  • top-center
  • top-right (default)

📦 Toaster Initialization Options

When creating a new Toaster instance, you can pass these options:

OptionTypeDescription
containerIdstringOptional ID to use for the toast container element
stacknumberMax number of toasts shown at once (default: 3)

✅ Features

  • 🚀 Lightweight and fast
  • 🎨 Light/dark/system theme support
  • 📌 Position control
  • 📚 Custom title & description
  • 🧱 Stackable with limit
  • 🧑‍🎨 Icon override
  • ❌ Dismissable option
  • ⚡ No framework needed

📃 License

MIT

🧑‍💻 Author

Made with ❤️ by @dipeshmurmu2005

Keywords

toast

FAQs

Package last updated on 25 Apr 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts