useToast

Provides the behavior and accessibility implementation for a toast component. Toasts display brief, temporary notifications of actions, errors, or other events in an application.

Example

Toast.tsx

Toast.css

Button.tsx

Button.css

Example

Toast.tsx

Toast.css

Button.tsx

Button.css

import {ToastProvider, Button} from './Toast';

<ToastProvider>
  {state => (
    <Button onPress={() => state.add('Toast is done!')}>Show toast</Button>
  )}
</ToastProvider>

API

<ToastRegion>
  {({toast}) => (
    <Toast toast={toast}>
      <ToastContent>
        <Text slot="title" />
        <Text slot="description" />
      </ToastContent>
      <Button slot="close" />
    </Toast>
  )}
</ToastRegion>

useToastState<T>(props: ToastStateProps): ToastState<T>useToastQueue<T>(queue: ToastQueue<T>): ToastState<T>

useToastRegion<T>(
  props: AriaToastRegionProps,
state: ToastState<T>,
ref: RefObject<HTMLElement | null>
): ToastRegionAria

useToast<T>(
  props: AriaToastProps<T>,
state: ToastState<T>,
ref: RefObject<FocusableElement | null>
): ToastAria

ToastState

Properties

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

Methods

`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.

AriaToastRegionProps

Name	Type

ToastRegionAria

Name	Type
`regionProps`	`DOMAttributes`
Props for the landmark region element.

AriaToastProps

Name	Type
`toast`	`QueuedToast<T>`
The toast object.

ToastAria

Name	Type
`toastProps`	`DOMAttributes`
Props for the toast container, non-modal dialog element.
`contentProps`	`DOMAttributes`
Props for the toast content alert message.
`titleProps`	`DOMAttributes`
Props for the toast title element.
`descriptionProps`	`DOMAttributes`
Props for the toast description element, if any.
`closeButtonProps`	`AriaButtonProps`
Props for the toast close button.