UseToast

Display an important message globally.

General

Basic usage.

Preview

See code

Multiline

Display multiline or overlong text.

Preview

See code

Action

Add a custom button to the Toast.

Preview

See code

Cancel

Use passive to change the style of the button.

Preview

See code

ReactNode

Show more information by replacing the string with a ReactNode.

Preview

See code

Type

Preview

See code

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'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'info'

Edit this page on GitHub

useTheme

MADE & DESIGNED WITHBY BRUNO ANDRADE