useToast

Display an important message globally. A toast is not a component you render: call setToast from useToasts anywhere under BolioUIProvider, and the provider shows it. It disappears after delay, and stays while the pointer is over it.

General

Basic usage. The toast closes after 2 seconds, or after delay milliseconds.

Type

Use type to tell a result from a problem. An error toast is announced right away by a screen reader, the others wait for a pause.

Multiline

Display multiline or overlong text.

Action

Add a button with actions. Its handler receives the click and a cancel function that closes the toast. Actions show only when text is a string.

Cancel

Use passive to change the style of the button, for an action that only dismisses.

ReactNode

Show more information by replacing the string with a ReactNode. The content replaces the whole toast, so put any button or link inside it.

Placement

Pass a layout to useToasts to choose where toasts appear. The layout applies when the component mounts, so it is set once, not on each toast.

Unique id

Give a toast an id to close it later with removeToastOneByID, or use removeAll to close every toast. Setting a toast with an id that is still shown throws an error, so check with findToastOneByID first.

APIs

const {
  // All Toasts currently in DOM
  toasts: Array<Toast>

  // Set a displayable Toast
  setToast: (toast: ToastInput) => void

  // Hide all Toast immediately
  removeAll: () => void

  // Query by id to get an instance of Toast
  findToastOneByID: (ident: string) => Toast | undefined

  // Remove the specified Toast by id
  removeToastOneByID: (ident: string) => void
} = useToasts(layout: ToastLayout)

type ToastPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'

interface ToastAction {
  name: string
  handler: (
    event: React.MouseEvent<HTMLButtonElement>,
    cancel: () => void
  ) => void
  passive?: boolean
}

type ToastTypes =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'info'