useToastState

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

install	`yarn add react-stately`
version	3.36.0
usage	`import {useToastState} from 'react-stately'`

View repository

GitHub

View package

NPM

API#

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

Interface#

Properties

Name	Type	Description
`visibleToasts`	`QueuedToast<T>[]`	The visible toasts.

Methods

Method	Description
`add( (content: T, , options?: ToastOptions )): string`	Adds a new toast to the queue.
`close( (key: string )): void`	Closes a toast.
`pauseAll(): void`	Pauses the timers for all visible toasts.
`resumeAll(): void`	Resumes 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 hook can be used to to subscribe to a ToastQueue within a React component, and returns the same interface as described above.

Properties

Name	Type	Description
`visibleToasts`	`<T>[]`	The currently visible toasts.

Methods

Method	Description
`constructor( (options?: )): void`
`subscribe( (fn: () => void )): void`	Subscribes to updates to the visible toasts.
`add( (content: T, , options: )): void`	Adds a new toast to the queue.
`close( (key: string )): void`	Closes a toast.
`pauseAll(): void`	Pauses the timers for all visible toasts.
`resumeAll(): void`	Resumes the timers for all visible toasts.

Example#

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

Name	Type	Description
`maxVisibleToasts`	`number`	The maximum number of toasts to display at a time.
`wrapUpdate`	`( (fn: () => void )) => void`	Function to wrap updates in (i.e. document.startViewTransition()).

Name	Type	Description
`onClose`	`() => void`	Handler that is called when the toast is closed, either by the user or after a timeout.
`timeout`	`number`	A timeout to automatically close the toast after, in milliseconds.

Name	Type	Description
`content`	`T`	The content of the toast.
`key`	`string`	A unique key for the toast.
`timer`	`Timer`	A timer for the toast, if a timeout was set.
`onClose`	`() => void`	Handler that is called when the toast is closed, either by the user or after a timeout.
`timeout`	`number`	A timeout to automatically close the toast after, in milliseconds.

Method	Description
`constructor( (callback: () => void, , delay: number )): void`
`reset( (delay: number )): void`
`pause(): void`
`resume(): void`

Method	Description
`constructor( (options?: ToastStateProps )): void`
`subscribe( (fn: () => void )): void`	Subscribes to updates to the visible toasts.
`add( (content: T, , options: ToastOptions )): void`	Adds a new toast to the queue.
`close( (key: string )): void`	Closes a toast.
`pauseAll(): void`	Pauses the timers for all visible toasts.
`resumeAll(): void`	Resumes the timers for all visible toasts.