Toast

Toasts are fired imperatively: wrap your app in ToastProvider, then call the function returned by useToast from anywhere in the tree.


import { ToastProvider, useToast, Button } from '@gg-software/ui';
 
// once, near the app root
<ToastProvider placement="bottom-right">
    <App />
</ToastProvider>;
 
// anywhere inside
function SaveButton() {
    const { toast } = useToast();
    return (
        <Button
            onClick={() =>
                toast({ title: 'Saved', tone: 'success' })
            }
        >
            Save
        </Button>
    );
}

ToastProvider props

Prop	Type	Default	Description
`children`*	`ReactNode`	—	content rendered inside the component
`placement`	`"top-right" \| "top-left" \| "bottom-right" \| "bottom-left"`	`top-right`
`duration`	`number`	`4000`	default auto-dismiss duration in ms

* required · generated from packages/ui/src/display/Toast/Toast.tsx

useToast

Must be called under a ToastProvider. Returns:

Field	Type	Description
`toast`	`(options: ToastOptions) => string`	show a toast; returns its id
`dismiss`	`(id: string) => void`	dismiss a toast by id


type ToastOptions = {
    tone?: 'info' | 'success' | 'warning' | 'error';
    title?: ReactNode;
    description?: ReactNode;
    /** auto-dismiss after ms; 0 keeps it until dismissed */
    duration?: number;
};