@softon/smart-toast

v1.0.8

Published

6 days ago

A modern toast notification library with SVG icons and gradient backgrounds.

0High
0Medium
0Low

softon

toast notification alert javascript ui

Smart Toast

A lightweight, dependency-free JavaScript toast notification library with a modern UI, automatic CSS injection, and zero configuration.

Smart Toast is designed to be simple to use while remaining highly customizable. It works in modern browsers without requiring any external CSS files or additional UI frameworks.

Features

✨ Beautiful modern toast notifications
🎨 Automatic CSS injection (no separate CSS file required)
🚀 Lightweight and fast
📦 Works with npm and CDN
📱 Responsive design
🎯 Four built-in notification types
- Success
- Error
- Warning
- Info
📍 Multiple display positions
⏱ Custom duration
📊 Animated progress bar
🖱 Pause timer on hover
❌ Close button
🔒 HTML escaping by default for improved security
🔁 Optional page reload after notification
🌐 Optional redirect after notification
📚 Queue support for multiple notifications
♿ Accessible (role="alert" and aria-live)
🎨 Theme-safe class names to avoid CSS conflicts

Installation

npm

npm install @softon/smart-toast

CDN

Use the published UMD build directly in a browser:

<script src="https://cdn.jsdelivr.net/npm/@softon/smart-toast/dist/smart-toast.umd.js"></script>

Plain HTML Example

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Smart Toast Demo</title>
</head>
<body>
  <button onclick="SmartToast.toast({ status: 'success', message: 'Hello from CDN!' })">
    Show Toast
  </button>

  <script src="https://cdn.jsdelivr.net/npm/@softon/smart-toast/dist/smart-toast.umd.js"></script>
  <script>
    SmartToast.config({
      duration: 3000,
      position: 'top-right'
    });
  </script>
</body>
</html>

Basic Usage

Browser / CDN

SmartToast.toast({
    status: "success",
    message: "Record saved successfully."
});

ESM Import

import SmartToast from '@softon/smart-toast';

SmartToast.toast({
    status: "success",
    message: "Record saved successfully."
});

Available Status Types

success
error
warning
info

Example:

SmartToast.toast({
    status: "error",
    message: "Invalid username or password."
});

Configuration

Set global defaults once.

SmartToast.config({
    duration: 4000,
    position: "top-right",
    maxToasts: 5,
    pauseOnHover: true,
    progressBar: true
});

Toast Options

SmartToast.toast({

    status: "success",

    message: "Saved successfully.",

    duration: 3000,

    position: "top-right",

    reload: false,

    url: null

});

Options

| Option | Type | Default | Description | | -------- | ------------- | ------------- | -------------------------------------------------- | | status | String | "info" | Toast type (success, error, warning, info) | | message | String | "" | Notification message | | duration | Number | 4000 | Auto close time (milliseconds) | | position | String | "top-right" | Display position | | reload | Boolean | false | Reload page after toast closes | | url | String | null | null | Redirect after toast closes |

| Option | Type | Default | Description | | --- | --- | --- | --- | | message | string | "Message Content" | Text shown in toast | | status | string | "info" | success, error, warning, info | | duration | number | 4000 | Auto-dismiss time (ms) | | reload | boolean | false | Reload page after dismiss | | url | string | null | Redirect after dismiss | | position | string | "top-right" | top-left, top-right, bottom-left, bottom-right, center |

Supported Positions

top-left

top-right

bottom-left

bottom-right

center

Progress Bar

Enable a smooth animated progress bar that automatically counts down the remaining display time.

Pause on Hover

When the cursor is placed over a toast notification, the countdown pauses automatically and resumes when the cursor leaves.

HTML Escaping

For security, notification messages are escaped by default to prevent unintended HTML rendering.

Multiple Toasts

Smart Toast supports multiple notifications simultaneously.

Notifications are displayed in a clean stack, and queued automatically when the configured limit is reached.

Browser Support

Supports all modern browsers including:

Chrome
Edge
Firefox
Safari
Opera

Examples

SmartToast.toast({
    status: "success",
    message: "Profile updated successfully."
});

SmartToast.toast({
    status: "warning",
    message: "Your session will expire soon."
});

SmartToast.toast({
    status: "error",
    message: "Unable to connect to the server."
});

SmartToast.toast({
    status: "info",
    message: "A new update is available."
});

Why Smart Toast?

Unlike many notification libraries, Smart Toast is designed to work with a single JavaScript file.

There is no need to include additional CSS files because the required styles are injected automatically when the library loads.

Its unique class names are designed to minimize conflicts with existing themes and CSS frameworks, making it suitable for integration into existing projects.

License

MIT License

Contributing

Contributions, bug reports, feature requests, and pull requests are welcome.

If you find a bug or have an idea for improvement, please open an issue on GitHub.

Author

Developed with ❤️ by the LNT Software.