AuraToast: Premium React Toast & Notification Manager

A high-performance npm package for React toast notifications with a stunning glassmorphism design and a strict "single-toast-at-a-time" constraint.

Live Demo & Playground

• Interactive Playground: Try it on StackBlitz
• Live Showcase: damicode18.github.io/aura-toast

Features

• ✨ Unique Aesthetic: Modern glassmorphism design with backdrop-filter, glowing borders, and sleek transitions.
• 🚫 Anti-Clutter: Enforces a single toast policy. New toasts automatically replace the current one.
• 🛠️ Framework Agnostic Core: Core logic is written in TypeScript and can be used with any framework.
• ⚛️ React Ready: Comes with first-class React support (AuraProvider, useAuraToast).
• 🎨 Highly Customizable: Uses CSS variables for easy theme adjustments.

Why AuraToast?

In a world of cluttered notification stacks, AuraToast takes a "less is more" approach. It's built for developers who want:

• Focus: The single-toast constraint ensures users are never overwhelmed.
• Aesthetics: Premium glassmorphism UI that fits modern, high-end applications.
• Lightweight: Zero-dependency core with first-class React support.
• Performance: Optimized for speed and smooth transitions.

Installation

# npm
npm install aura-toast

# yarn
yarn add aura-toast

# pnpm
pnpm add aura-toast

# bun
bun add aura-toast

Quick Start (React)

1. Import the styles in your main entry file (e.g., main.tsx or App.tsx):

import 'aura-toast/dist/style.css';

2. Wrap your application with AuraProvider:

import { AuraProvider } from 'aura-toast';

Live Demo

Check out the interactive showcase: [Live Demo Link (GitHub Pages/Vercel)]

[!TIP] Single Toast Policy: AuraToast is designed for focus. Each new toast replaces the previous one with a smooth transition, preventing UI clutter.

2. Trigger toasts using the auraToast object:

import { auraToast } from 'aura-toast';

function MyComponent() {
  const handleClick = () => {
    auraToast.success('Changes saved successfully!', {
      action: {
        label: 'Undo',
        onClick: () => console.log('Undo clicked'),
      }
    });
  };

  return <button onClick={handleClick}>Save</button>;
}

Vanilla JS & Other Frameworks

AuraToast is built with a Framework-Agnostic Core. While we provide React components for convenience, you can easily use it with any framework (Vue, Svelte, Angular) or Vanilla JS by subscribing to the toastStore.

Usage in Vanilla JS

import { auraToast, toastStore } from 'aura-toast';
import 'aura-toast/dist/style.css';

// 1. Subscribe to the store to handle rendering
toastStore.subscribe((config) => {
  if (config) {
    // Render your own toast UI or use the provided CSS classes
    console.log('Show toast:', config.message);
  } else {
    // Hide toast
    console.log('Hide toast');
  }
});

// 2. Trigger toasts as usual
auraToast.success('Works in Vanilla JS too!');

API

auraToast.success(message, config?)

auraToast.error(message, config?)

auraToast.info(message, config?)

auraToast.warning(message, config?)

auraToast.dismiss()

Configuration Object

| Property | Type | Description | | --- | --- | --- | | duration | number | Time in ms before auto-dismiss (default: 4000). Set to 0 for sticky toasts (remains until replaced or manual dismiss). | | action | { label: string, onClick: () => void } | Optional action button. |

Customization

You can override the default styles by providing values for these CSS variables:

:root {
  --aura-bg: rgba(17, 25, 40, 0.75);
  --aura-success: #10b981;
  /* ... see aura-toast.css for more */
}

License

MIT