useToast@astryxdesign/core v0.5.2 · useToast

Usage

Hook for showing toast notifications from anywhere in your component tree. Returns a function that accepts toast options and shows the notification. Works automatically with LayerProvider or self-mounts a fallback viewport.

ts
import {useToast} from '@astryxdesign/core/Toast'

Best practices

GuidancePractices
Do

Use for transient success/error feedback that does not require user action.

Do

Set uniqueID to deduplicate toasts from rapid user actions.

Don't

Use for critical errors that require acknowledgment; use AlertDialog instead.

Don't

Call useToast in the same component that renders LayerProvider; it must be called from a child component inside the provider.

Returns

FieldTypeDescription
showToast(options:
) => () => void

Show a toast notification. Returns a dismiss function. Options include body (ReactNode), type ("info" | "error"), isAutoHide, autoHideDuration, endContent, uniqueID, and collisionBehavior.

Examples

Common configurations, variations, and states.
Toast
Open in Playground

Imperative toast notifications triggered with useToast and rendered in the toast viewport.

Use with shadcn

Already using the shadcn registry workflow? Install the real Astryx package and a local public re-export. Component implementation source stays in Astryx. How compatibility works.

This install URL expires with the draft preview.
bash
npx shadcn@latest add https://astryx-pxujcw3w9-fbopensource.vercel.app/r/hooks/use-toast.json
Install the editable showcase composition
bash
npx shadcn@latest add https://astryx-pxujcw3w9-fbopensource.vercel.app/r/showcases/toast/default.json