itstoaster

v1.1.1

Published

a year ago

A lightweight toast notification package for JavaScript

0High
0Medium
0Low

itsdipesh

toast toaster notifications js

🔔 itstoaster

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

📦 Installation

npm install itstoaster

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

| Option | Type | Default | Description | | ------------- | ----------------- | ------------- | ----------------------------------------------------------------- | | title | string \| null | null | Optional title text | | description | string \| null | null | Optional description | | duration | number \| false | 3000 | How long toast stays (in ms). Use false to disable auto-dismiss | | dismissable | boolean | false | Show a close button | | position | string | top-right | One of: top-left, top-center, top-right | | icon | string | Based on type | Override 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

| Type | Icon name | | ------- | -------------------- | | success | check_circle | | warning | exclamation_circle | | error | triangular_error | | info | info_circle | | close | cross |

✅ 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:

| Option | Type | Description | | ------------- | -------- | -------------------------------------------------- | | containerId | string | Optional ID to use for the toast container element | | stack | number | Max 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