Geist UI

useToast

Display an important message globally.

General

Basic usage.

Multiline

Display multiline or overlong text.

Action

Add a custom button to the Toast.

Cancel

Use passive to change the style of the button.

ReactNode

Show more information by replacing the string with a ReactNode.

Type

APIs

`useToasts`

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)

`ToastLayout`

Option	Description	Type	Default
padding	CSS properties	`string`	-
margin	CSS properties	`string`	-
width	CSS properties	`string`	-
maxWidth	CSS properties	`string`	`90vw`
maxHeight	CSS properties	`string`	`75px`
placement	the pop-up position of toast	ToastPlacement	`bottomRight`

`ToastInput`

Option	Description	Type	Default
id	unique identifier that can be auto generated	`string`	-
text	content displayed in toast	`string`, `ReactNode`	-
type	the type of toast	ToastTypes	`default`
delay	close after a specified time	`number`	`2000`
actions	specify a default action	ToastAction	-

`ToastPlacement`

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

`ToastAction`

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

`ToastTypes`

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

Contributors