Developer-Friendly Toast Alerts in JavaScript – Toast-JS

Toast-JS is a JavaScript notification library that provides a simple way to display non-blocking notification messages (toasts) in your web application.

Features:

• 12+ positioning options (top/bottom/center combinations)
• Prebuilt styles for success, error, warning, and info notifications
• CSS-in-JS styling for custom designs without extra stylesheets
• Dynamic icon support (SVG, PNG, even WebM/MP4 videos)
• 15+ built-in animations (slide, fade, wobble, wave effects)
• Duration control down to the millisecond
• Accessible by default with proper ARIA attributes
• React-compatible without additional dependencies

How to use it:

1. Include the library script ‘Toast.js’ on the webpage.

<script src="Toast.js"></script>

2. You need a container element where the toasts will appear.

<div id="toast-notification" class="toast-notification"></div>

3. Create a simple toast notification with the following code:

• context: Target container.
• message: The text content of the toast.
• duration: How long the toast stays visible. Use Toast.LENGTH_SHORT (3 seconds), Toast.LENGTH_LONG (6 seconds), or provide milliseconds (e.g., 5000 for 5 seconds).

Toast.makeText(document.body, "CSSScript", Toast.LENGTH_SHORT).show();

4. You can then chain methods after makeText() before calling show():

Available Styles:

Toast.STYLE_SUCCESS, Toast.STYLE_ERROR, Toast.STYLE_INFO, Toast.STYLE_WARNING, Toast.STYLE_DEFAULT_1, Toast.STYLE_DEFAULT_2, Toast.STYLE_LIGHT_MODE, etc. You can also pass the string name like "success".

Available Positions:

Toast.POSITION_TOP_LEFT, Toast.POSITION_TOP_CENTER, Toast.POSITION_TOP_RIGHT, Toast.POSITION_BOTTOM_LEFT, Toast.POSITION_BOTTOM_CENTER, Toast.POSITION_BOTTOM_RIGHT, Toast.POSITION_CENTER

5. You can use Toast-JS in React, but it’s not a typical React library. It directly manipulates the DOM outside of React’s virtual DOM.

import React from 'react';
function MyComponent() {
  const handleShowToast = () => {
    // Check if Toast is loaded (good practice)
    if (window.Toast) {
      const toast = Toast.makeText(
        document.body, // Still use document.body
        "Hello from React!",
        Toast.LENGTH_SHORT
      );
      toast.setStyle(Toast.STYLE_INFO);
      toast.setPosition(Toast.POSITION_BOTTOM_RIGHT);
      toast.show();
    } else {
      console.error("Toast-JS library not loaded.");
    }
  };
  return (
    <button onClick={handleShowToast}>Show React Toast</button>
  );
}
export default MyComponent;