Introduction

flux-toast is a complete toast notification system for React and Next.js. TypeScript-first, SSR-safe, zero unnecessary re-renders, and ships with animated icons and progress timers out of the box.

What is flux-toast

A single function call — toast("Done!") — is all you need to show a notification. It handles positioning, stacking, animations, queuing, duplicate grouping, accessibility announcements, and auto-dismiss timers automatically.

tsx

import { toast } from "flux-toast";

// That's it. One line.
toast("Changes saved successfully");

// Or with a type
toast.success("Profile updated");
toast.error("Something went wrong");

Features

✓

All features are opt-in. The simplest usage is just toast("message").

Expandable body

Collapsed by default, expand for details

Progress timers

Animated bar + countdown on hover

Queue system

maxVisible limit, FIFO promotion

Promise tracking

Loading → success/error transitions

Duplicate grouping

Identical toasts merge with count badge

6 positions

Top/bottom × left/center/right

Dark mode

System, light, or dark theme presets

SSR safe

Works seamlessly with Next.js App Router

Accessible

ARIA live regions + screen reader compatible

Swipe dismiss

Mobile-friendly gesture support built-in

How it works

The library uses a vanilla Zustand store for global state. Components subscribe via React 18's useSyncExternalStore. Animations are powered by the motion library (framer-motion). Toast icons are animated SVGs drawn with path animations for a polished feel.