useToast

Display an important message globally.

Standard

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 / Schnittstellendokumentation

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

OptionDescriptionTypeDefault
paddingCSS propertiesstring-
marginCSS propertiesstring-
widthCSS propertiesstring-
maxWidthCSS propertiesstring90vw
maxHeightCSS propertiesstring75px
placementthe pop-up position of toastToastPlacementbottomRight

ToastInput

OptionDescriptionTypeDefault
idunique identifier that can be auto generatedstring-
textcontent displayed in toaststring, ReactNode-
typethe type of toastToastTypesdefault
delayclose after a specified timenumber2000
actionsspecify a default actionToastAction-

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'