ToastProvider

The provider behind useToast(). It keeps the list of toasts, handles their timers and renders the notification stack. JarvisProvider already includes it.

import { ToastProvider } from 'jarvis-react-ui';

Setup

Most apps get it through JarvisProvider. Use ToastProvider on its own when you manage sound yourself or need a separate toast area for part of the app.

import { ToastProvider } from 'jarvis-react-ui';

export function Root({ children }: { children: React.ReactNode }) {
    return <ToastProvider placement="top-right">{children}</ToastProvider>;
}

Placement

The stack is fixed to a corner or edge of the viewport: bottom-right (default), top-right, bottom-center or top-center. Inside an element with a transform, such as the demo frame below, it stays within that element.

import { useState } from 'react';
import { Button, ToastProvider, useToast } from 'jarvis-react-ui';
import type { ToastPlacement } from 'jarvis-react-ui';

const PLACEMENTS: ToastPlacement[] = ['bottom-right', 'top-right', 'bottom-center', 'top-center'];

function Trigger({ placement }: { placement: ToastPlacement }) {
    const { toast } = useToast();
    return <Button onClick={() => toast({ title: `Shown ${placement}` })}>Show toast</Button>;
}

export default function Placement() {
    const [placement, setPlacement] = useState<ToastPlacement>('top-right');

    return (
        <div className="flex flex-col items-center gap-4">
            <div className="flex flex-wrap justify-center gap-2">
                {PLACEMENTS.map((p) => (
                    <Button
                        key={p}
                        size="sm"
                        variant={p === placement ? 'primary' : 'ghost'}
                        onClick={() => setPlacement(p)}
                    >
                        {p}
                    </Button>
                ))}
            </div>
            <ToastProvider placement={placement}>
                <Trigger placement={placement} />
            </ToastProvider>
        </div>
    );
}

Queue

At most max toasts (default 3) are visible. Further toasts wait in a queue and appear as soon as a visible one closes.

import { Button, ToastProvider, useToast } from 'jarvis-react-ui';

function Burst() {
    const { toast, dismissAll } = useToast();

    function burst() {
        for (let i = 1; i <= 5; i++) {
            toast({ title: `Sensor ${i} online`, duration: 3000 });
        }
    }

    return (
        <>
            <Button onClick={burst}>Fire 5 toasts</Button>
            <Button variant="ghost" onClick={dismissAll}>
                Clear
            </Button>
        </>
    );
}

export default function Queue() {
    return (
        <ToastProvider max={2} placement="top-right">
            <Burst />
        </ToastProvider>
    );
}

Accessibility

The stack is a <section> with aria-live="polite" and an accessible name (label, default "Notifications"). See Toast for keyboard and screen reader behavior.

API