ToastaX 5.0.0

ToastaX is a modern, lightweight, customizable, and accessible toast notification library for React applications. Built with JavaScript (TypeScript Supported), it provides a simple API for displaying notifications with basic themes and interactive features. Specializing in "Glassmorphism" and "Liquid Glass" themes for a sleek, contemporary UI/UX.

Features

• Lightweight & Optimized: Minimal features for faster load times and smaller bundle size.
• Customizable Styling: Choose from themes (light, dark, system, glass, liquid-glass).
• Accessibility: Basic ARIA attributes.
• Interactivity: Pause on hover, closable toasts.
• Responsive Design: Adapts to mobile devices with dynamic positioning.
• TypeScript Support: Fully typed with TypeScript definitions.

Installation

Install ToastaX via npm or yarn:

npm install toastax

Install peer dependencies:

npm install dompurify prop-types

Usage

Basic Setup

Import ToastaX and the Toaster component, then render the toaster in your React app:

import { Toaster, toastax } from 'toastax';
import 'toastax/dist/toastax.css';

function App() {
  return (
    <div>
      <Toaster position="top-right" theme="light" />
      <button
        onClick={() =>
          toastax.success('Operation completed!', {
            duration: 3000,
          })
        }
      >
        Show Toast
      </button>
    </div>
  );
}

export default App;

Custom ToastaX Instance

Create a custom instance with default options:

import { Toaster, ToastaX } from 'toastax';
import 'toastax/dist/toastax.css';

const toast = new ToastaX({
  position: 'bottom-right',
  theme: 'liquid-glass',
  duration: 5000,
  pauseOnHover: true,
  closable: true,
});

function App() {
  return (
    <div>
      <Toaster toastaxInstance={toast} />
      <button
        onClick={() =>
          toast.info('Info message')
        }
      >
        Show Info Toast
      </button>
    </div>
  );
}

export default App;

Configuration Options

Basic configuration options to customize toast behavior and appearance:

| Option | Type | Default | Description | |-------|------|--------|-------------| | position | 'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right' | 'bottom-right' | Position of the toast container. | | theme | 'light' \| 'dark' \| 'system' \| 'glass' \| 'liquid-glass' | 'system' | Visual theme of the toast. | | duration | number | 4000 | Duration (ms) before auto-dismiss. | | closable | boolean | true | Show close button. | | pauseOnHover | boolean | true | Pause timer on hover. |

For a complete list, see the TypeScript definitions.

API Methods

ToastaX provides a simple API for managing toasts:

• show(options: Partial<ToastOptions>): Display a toast with custom options.
• success(message?: string \| ReactNode, options?: Partial<ToastOptions>): Display a success toast.
• error(message?: string \| ReactNode, options?: Partial<ToastOptions>): Display an error toast.
• warning(message?: string \| ReactNode, options?: Partial<ToastOptions>): Display a warning toast.
• info(message?: string \| ReactNode, options?: Partial<ToastOptions>): Display an info toast.
• dismiss(id?: number): Dismiss a specific toast by ID.
• update(id: number, options: Partial<ToastOptions>): Update an existing toast's options.
• destroy(): Clean up the ToastaX instance.

Styling

Customize ToastaX using CSS custom properties defined in toastax.css:

:root {
  --toastax-border-radius: 12px;
  --toastax-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  --toastax-font-size: 0.9rem;
  --toastax-gap: 14px;
}

For advanced customization, target elements with .toastax-toast.success or similar selectors.

Accessibility

ToastaX includes basic accessibility features like ARIA roles. Ensure custom content follows WCAG guidelines.

Changelog

Version 5.0.0

• Simplified for lighter weight.
• Added "Liquid Glass" theme.
• Enhanced efficiency.

For support, contact the author at [email protected].