Toaster

Toaster is more than a visual container. It is the component that creates one runtime, registers it by toasterId, configures view options, and renders the current visible toast stack.

Core props

• toasterId?
• position?
• transport?
• limit?
• reverseOrder?
• gutter?
• containerStyle?
• containerClassName?
• toastOptions?
• children?

Runtime registration

Toaster gets its runtime from useToasterRuntime(toasterId), and that runtime is registered into the global registry. That is why facade calls can later find it.

If no matching runtime is mounted for a given toasterId, the facade throws.

Position, limit, and order

• position filters which runtime items are visible in this rendered stack
• limit caps the visible subset, not the raw store contents
• reverseOrder only changes render ordering
• gutter affects offset calculation between measured rows

transport

• inline renders in the normal React tree
• top-layer uses manual popover when supported and falls back to inline otherwise

toastOptions

toastOptions provides the global and per-type defaults for this runtime's view layer.

These are merged before per-toast call options.

Custom row rendering

If children is provided, Toaster uses that render function instead of rendering a plain ToastBar row.

<Toaster>
  {(toast, { dismiss }) => (
    <button onClick={dismiss}>{toast.message}</button>
  )}
</Toaster>

Hover pause

The default container pauses runtime timers on mouse enter and resumes them on mouse leave.