Headless Usage
Build custom toast UI with useToaster and useToastItems.
Headless Usage
Use the headless APIs when you want toast state and handlers without the default row rendering.
useToaster()
const { toasts, handlers } = useToaster();This hook must run under a mounted Toaster context.
toasts
The current visible toast list for that runtime.
handlers
updateHeight(id, height)startPause()endPause()calculateOffset(toast, options?)
These are the same helpers the default Toaster uses internally.
Example
import { toast, useToaster } from '@ilokesto/toast';
function CustomToastList() {
const { toasts, handlers } = useToaster();
return (
<div onMouseEnter={handlers.startPause} onMouseLeave={handlers.endPause}>
{toasts.map((item) => (
<div
key={item.id}
ref={(node) => {
if (node) handlers.updateHeight(item.id, node.offsetHeight);
}}
>
{item.message}
<button onClick={() => toast.dismiss(item.id)}>Dismiss</button>
</div>
))}
</div>
);
}useToastItems(runtime)
Use this lower-level hook when you already have a runtime and only want the visible item list.