Toast
A succinct message that is displayed temporarily.
Usage
The useToast hook returns a toast function that you can use to display a toast.
import {useToast,Toaster} from "@momo-webplatform/mobase";export const ToastDemo = () => {
const { toast } = useToast()
return (
<>
<Button
onClick={() => {
toast({
variant: "sucess",
description: "Copy nội dung thành công.",
})
}}
>
Sao chép mã
</Button>
<Toaster />
</>
);
};NOTE: Toast just need the Toaster component to show. Add the
Toastercomponent to your app or in Body tag .
Examples
Simple
With title
With action
Variants
API Reference
toast
| Prop | Type | Default | Required |
open | enumboolean | -- | false |
title | enumstring & ReactNode | -- | false |
onPause | () => void | -- | false |
asChild | enumboolean | -- | false |
type | enumforeground | background | -- | false |
duration | number | -- | false |
onEscapeKeyDown | (event: KeyboardEvent) => void | -- | false |
onResume | () => void | -- | false |
onSwipeStart | (event: SwipeEvent) => void | -- | false |
onSwipeMove | (event: SwipeEvent) => void | -- | false |
onSwipeCancel | (event: SwipeEvent) => void | -- | false |
onSwipeEnd | (event: SwipeEvent) => void | -- | false |
defaultOpen | enumboolean | -- | false |
onOpenChange | (open: boolean) => void | -- | false |
forceMount | true | -- | false |
variant | enumsucess | warning | error | -- | false |
description | enumReactNode | -- | false |
action | ToastActionElement | -- | false |
ToastAction
| Prop | Type | Default | Required |
asChild | enumboolean | -- | false |
altText | string | -- | true |