Its toaster
v1.0.5
A lightweight, dependency-free toast notification library for modern web apps.
The recommended installation method is NPM. Install the latest version by the following command
You can also include this library from CDN:
In your main JavaScript file (e.g., main.js), import the Toaster and styles:
To display a success message, use the toast.success() method.
You can also pass an argument as an options object to customize the toast.
There are many more options checkout here
To display a warning message, use the toast.warning() method.
To display a error message, use the toast.error() method.
To display a info message, use the toast.info() method.
You can pass an argument to customize the toast. Options include duration, position, icon and many more. All fields are optional — just use what fits your needs!
Itstoaster supports per-toast options — lightweight and customizable settings passed when showing a toast. These options let you control things like duration, position, icon, and styling for each toast individually. They are designed to be dynamic, so you can customize every toast on the fly without affecting others.
| Option | Type | Default | Description | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| title | string | null | default string | Title Text | ||||||||||||||||
| description | string | null | default string | Description Text | ||||||||||||||||
| duration | number | boolean | 3000 | How long toast stays (in ms). Use false to disable auto-dismiss | ||||||||||||||||
| dismissable | boolean | false | Shows a close button | ||||||||||||||||
| position | string | top-right | One of: top-left, top-center, top-right | ||||||||||||||||
| icon | object | Depends on toast type | Custom icon object. Defaults based on toast type (success, error, etc). See icon parameters | ||||||||||||||||
|
|
||||||||||||||||||
Itstoaster automatically follows the user's system theme (light or dark).
You can switch between data-theme="light" or data-theme="dark" to manually control the appearance.
You can use any of the following icon names in the icon obj option
| Name | Preview |
|---|---|
| check_circle | |
| exclamation_circle | |
| triangular_error | |
| cross |
Global options let you configure the behavior and structure of the main toaster container. These options are set once during initialization and apply to all toasts.
| Option | Type | Default | Description |
|---|---|---|---|
| containerId | string | null | itstoaster-container | Optional ID to use for the toast container element |
| stackSize | number | 3 | Max number of toasts shown at once (default: 3) |
