ToastRegion

Use ToastRegion

ToastRegion is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, ToastRegion } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <ToastRegion items={[{id:"saved",title:"Changes saved",status:"success",duration:0}]} onDismiss={id => { /* Remove the item from host state. */ }} />
    </FloodRoot>
  );
}

Design notes

• The host owns items and removes them onDismiss. IDs must be unique/nonempty. limit controls visible items; queued timers start only when visible. Ordinary messages default to five seconds; error/action messages persist unless duration is explicit. duration=0 persists.
• Timers pause on hover, focus and hidden documents. F8 focuses the first visible region without interrupting initial task focus; hotkey=false disables it. Use a single main region per document. Localize label/closeLabel and message/action text. Error messages announce as alerts; others use polite status.
• placement is logical start/end. inline embeds the region in a host container; fixed mode uses ordinary document stacking, so place a contextual region inside a modal if needed. Action callbacks do not dismiss automatically. No global notification store or promise API. Available in 0.2.5.

API reference