beta

useToastState

Provides state management for a toast queue. Toasts display brief, temporary notifications of actions, errors, or other events in an application.

installyarn add @react-stately/toast
version3.0.0-beta.4
usageimport {useToastState} from '@react-stately/toast'

API#


useToastState<T>( (props: ToastStateProps )): ToastState<T>

Interface#


Properties

NameTypeDescription
visibleToastsQueuedToast<T>[]The visible toasts.

Methods

MethodDescription
add( (content: T, , options?: ToastOptions )): stringAdds a new toast to the queue.
close( (key: string )): void

Closes a toast. If hasExitAnimation is true, the toast transitions to an "exiting" state instead of being removed immediately.

remove( (key: string )): voidRemoves a toast from the visible toasts after an exiting animation.
pauseAll(): voidPauses the timers for all visible toasts.
resumeAll(): voidResumes the timers for all visible toasts.

ToastQueue#


useToastState uses a ToastQueue under the hood, which means the queue is owned by the component that calls it. If you want to have a global toast queue outside the React tree, you can use the ToastQueue class directly. The useToastQueue hook can be used to to subscribe to a ToastQueue within a React component, and returns the same interface as described above.

Properties

NameTypeDescription
visibleToastsQueuedToast<T>[]The currently visible toasts.

Methods

MethodDescription
constructor( (options?: ToastStateProps )): void
subscribe( (fn: () => void )): voidSubscribes to updates to the visible toasts.
add( (content: T, , options: ToastOptions )): voidAdds a new toast to the queue.
close( (key: string )): void

Closes a toast. If hasExitAnimation is true, the toast transitions to an "exiting" state instead of being removed immediately.

remove( (key: string )): voidRemoves a toast from the visible toasts after an exiting animation.
pauseAll(): voidPauses the timers for all visible toasts.
resumeAll(): voidResumes the timers for all visible toasts.

Example#


See the docs for useToast in react-aria for an example of useToastState.