Component / Feedback
Toast Stack
Queue polite and urgent notifications without flooding the viewport. Radix handles announcements, timers, focus, and swipe while Easecraft retains exits and animates reflow.
0 active / 0 queued
Notification center / live updates
06
Notification controls
Hover or focus the stack to pause every auto-dismiss timer.
Delivery contract
Install it
pnpm add easecraft@0.1.0The component imports stable APIs from easecraft.
Files / 00
Dependencies / 03
- easecraft
- npm / 0.1.0
- react
- peer / >=18.2.0 <20.0.0
- react-dom
- peer / >=18.2.0 <20.0.0
Package usage
Use it
import { ToastStack } from "easecraft";
<ToastStack
items={notifications}
limit={3}
onDismiss={(id) => removeNotification(id)}
/>Typed contract
API
| Prop | Type | Default | Purpose |
|---|---|---|---|
| items | readonly ToastStackItem[] | required | Controlled notification queue |
| onDismiss | (id, reason) => void | required | Remove request callback |
| limit | number | 3 | Maximum visible notifications |
| duration | number | 5000 | Default auto-dismiss delay |
| priority | "polite" | "assertive" | "polite" | Per-item announcement priority |
| entryDuration | duration token | number | "normal" | Entry duration |
| exitDuration | duration token | number | "fast" | Exit duration |
| reflowDuration | duration token | number | "normal" | Stack reflow duration |
| distance | distance token | number | "medium" | Entry and exit travel |
| swipeDirection | "up" | "down" | "left" | "right" | "right" | Swipe dismissal axis |
| swipeThreshold | number | 50 | Required swipe distance |
| hotkey | string[] | ["F8"] | Viewport focus shortcut |
| onPauseChange | (id, paused) => void | none | Timer pause notifications |
| announcerContainer | Element | document.body | Live-region portal target |
Release requirement
Accessibility
- Announcements
- Polite notices use a status region; urgent notices use assertive priority.
- Pausable timers
- Hover, focus, and window blur pause auto-dismiss until interaction ends.
- Keyboard
- F8 focuses the viewport and every close or action control remains reachable.
- Reduced motion
- Entry, exit, and reflow settle immediately without changing announcements.