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.