# ToastRegion

A host-controlled notification queue with timed, pausable messages and actions.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"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

| Prop | Values | Default |
| --- | --- | --- |
| `items` | `readonly ToastItem[]` | `Required` |
| `onDismiss` | `(id: string) => void` | `Required` |
| `label` | `string` | `"Notifications"` |
| `closeLabel` | `string` | `"Dismiss notification"` |
| `placement` | `"top-start" \| "top-end" \| "bottom-start" \| "bottom-end"` | `"bottom-end"` |
| `limit` | `number` | `3` |
| `inline` | `boolean` | `false` |
| `hotkey` | `boolean` | `true` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "children" \| "role">` | `Forwarded` |