Toast

Transient notification system. Use the useToast hook to trigger, and mount one ToastContainer at the root of your app.

Examples

Trigger from buttons

useToast returns helpers for each tone — success / error / warning / info.

const { toasts, removeToast, success, error, warning, info } = useToast();

return (
  <>
    <Button onClick={() => success('Saved successfully!')}>Success</Button>
    <Button onClick={() => error('Something went wrong')}>Error</Button>
    <Button onClick={() => warning('Heads up')}>Warning</Button>
    <Button onClick={() => info('Just so you know')}>Info</Button>

    <ToastContainer toasts={toasts} onClose={removeToast} />
  </>
);

Custom duration

Override the auto-dismiss timeout per toast.

success('This stays for 10 seconds', 10_000);
info('This dismisses in 1 second', 1_000);

App-wide setup (recommended)

Use the built-in ToastProvider — single global queue, sonner-style toast.* helper, no context boilerplate.

The Provider mounts a single shared useToast() + ToastContainer for the whole app, then exposes both the idiomatic hook and a module-level toast.success(...) shortcut against that same instance. No state duplication, no extra context to wire.

// app/layout.tsx (Next) or main.tsx (Vite)
import { ToastProvider } from '@kactostecnologia/benix-ds/toast';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ToastProvider position="top-right">
          {children}
        </ToastProvider>
      </body>
    </html>
  );
}

// anywhere in your tree — hook style
import { useToast } from '@kactostecnologia/benix-ds/toast';
const { success } = useToast();
success('Saved!');

// or sonner-style, works outside components too
import { toast } from '@kactostecnologia/benix-ds/toast';
toast.success('Saved!');
toast.error('Failed');

Headless (advanced)

Skip the Provider if you want full control over container placement or run multiple isolated stacks.

The main entry still ships the headless useToast + ToastContainer primitives unchanged. Reach for them when you genuinely need a scoped, non-global queue.

// useToast from the main entry is local state — one queue per call.
import { ToastContainer, useToast } from '@kactostecnologia/benix-ds';

function MyScopedToasts() {
  const { toasts, removeToast, success } = useToast();
  return (
    <>
      <button onClick={() => success('Scoped only to this subtree')} />
      <ToastContainer toasts={toasts} onClose={removeToast} />
    </>
  );
}

API Reference

Props of the Toast component.

Prop	Type	Default	Description
`ToastProvider`	`component`	—	From /toast subpath. Mount once at the root; renders a single shared ToastContainer.
`toast`	`object`	—	From /toast. Module-level helper: toast.success/error/warning/info — works anywhere, including outside components.
`useToast() (from /toast)`	`hook`	—	Attached to the Provider instance. Throws if used outside <ToastProvider>.
`useToast() (headless)`	`hook`	—	From the main entry. Local useState — one queue per call. Pair with your own ToastContainer.
`position`	`'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' \| 'top-center' \| 'bottom-center'`	`'top-right'`	—
`duration`	`number`	`4000`	Default ms before auto-dismiss.