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
.
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'