Toast Notifications

Non-blocking NERV telemetry-style alerts triggered via the useToast() hook. Five severity variants with auto-dismiss progress bar, monospace typography, and CRT glow effects. Uses AnimatePresence for smooth slide-in/slide-out transitions.

[SRC]tsx

1import { NervToastProvider, useToast } from "@mdrbx/nerv-ui";

All Variants

[i]INTERACTIVE

Click each button to fire a toast notification. Toasts appear in the bottom-right corner and auto-dismiss after 3 seconds. Click any toast to dismiss it immediately.

VARIANTSinspection frame

live inspectionframe-01

Custom Duration

DURATIONinspection frame

live inspectionframe-01

Setup

Wrap your application with <NervToastProvider> to enable toast notifications:

[SRC]tsx

1// app/layout.tsx or root component
2import { NervToastProvider } from "@mdrbx/nerv-ui";
3
4export default function Layout({ children }) {
5  return <NervToastProvider>{children}</NervToastProvider>;
6}

Then use the useToast() hook anywhere inside the provider:

[SRC]tsx

1import { useToast } from "@mdrbx/nerv-ui";
2
3function MyComponent() {
4  const { addToast } = useToast();
5
6  return (
7    <button
8      onClick={() =>
9        addToast({
10          message: "PATTERN BLUE DETECTED",
11          variant: "critical",
12          duration: 5000,
13        })
14      }
15    >
16      ALERT
17    </button>
18  );
19}

Props

//NervToastProvider

Prop	Type	Default	Description
children	ReactNode	—	Application content to wrap

//addToast Payload

Prop	Type	Default	Description
message	string	—	Toast notification text
variant	"info" \| "success" \| "warning" \| "error" \| "critical"	—	Severity level — determines color and prefix
duration	number	3000	Auto-dismiss delay in milliseconds

//useToast() Return

Prop	Type	Default	Description
toasts	Toast[]	—	Current active toast notifications
addToast	(payload) => void	—	Dispatch a new toast notification
removeToast	(id: string) => void	—	Manually dismiss a toast by ID

[!]PROVIDER REQUIRED

The useToast() hook must be used inside an NervToastProvider. Calling it outside will throw an error: [NERV-UI] useToast must be used within an NervToastProvider.