Customizable JS Toast Notification System with Themes – ChangeAlert

Category: Javascript , Notification | May 23, 2025
0 Comment
Authorrajkumarnimod
Last UpdateMay 23, 2025
LicenseMIT
Tags
Views97 views
OfficialGo to website
Live DemoDownload
Customizable JS Toast Notification System with Themes – ChangeAlert

ChangeAlert is a lightweight toast notification JavaScript library that displays customizable, interactive, and responsive alert messages to your users.

You can use it to confirm a successful form submission, flag an input error without halting everything, or just give a heads-up about a system status.

Features:

  • Multiple Alert Types: Standard success, error, warning, and info notifications.
  • Customization: Control position, timeout, themes (dark/light or your own), icons (including emojis or custom HTML/SVG), and sound.
  • Interactivity: Toasts can have close buttons, pause their timeout on hover, and trigger onClick or onClose callback functions.

How to use it:

1. Link the CSS in your <head> and the JS script just before your closing </body> tag.

<link rel="stylesheet" href="dist/style.css" />
<script src="dist/script.js"></script>

2. Triggering toast notifications with a single line of JavaScript:

ChangeAlert.success("Success Message");
ChangeAlert.error("Error Message");
ChangeAlert.warning("Warning Message");
ChangeAlert.info("Info Message");

3. Configure your toast notifications by passing configuration options as the second parameter:

  • message: Sets the text content displayed within the toast.
  • position: Determines where the toast appears on the screen: ‘top-right’, ‘top-left’, ‘bottom-right’, or ‘bottom-left’.
  • timeout: Sets the duration in milliseconds before the toast automatically dismisses; 0 keeps it visible.
  • icon: Defines a custom icon for the toast, accepting emojis, SVG, or HTML.
  • theme: Applies a theme, either built-in (light, dark) or a custom CSS class.
  • sound: Enables or specifies a sound url to play when the toast appears.
  • closeButton: Toggles the visibility of the manual close (✖) button.
  • pauseOnHover: Pauses the auto-dismiss timer when the mouse cursor is over the toast.
  • onClick: Assigns a callback function to execute when the toast is clicked.
  • onClose: Assigns a callback function to execute after the toast is closed and removed.
ChangeAlert.error("Error Message", {
  position: "top-right",
  timeout: 3000,
  icon: null,
  closeButton: true,
  animation: "fade",
  theme: "light",
  onClick: null,
  onClose: null,
  sound: false,
  pauseOnHover: true,
});

4. You can define your own theme by adding a CSS class.

.changealert.customTheme {
  /* your styles here */
}
ChangeAlert.info("Custom Theme", { 
  theme: "customTheme" 
});

See Also:

You Might Be Interested In:

Leave a Reply