Display an important message globally.
Basic usage.
Display multiline or overlong text.
Add a custom button to the Toast.
Use passive to change the style of the button.
Show more information by replacing the string with a ReactNode.
useToastsconst {
// 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 | - |
ToastPlacementtype ToastPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
ToastActioninterface ToastAction {
name: string
handler: (event: React.MouseEventHandler<HTMLButtonElement>, cancel: Function) => void
passive?: boolean
}
ToastTypestype ToastTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'