Toast

Notifikasi tidak mengganggu yang muncul sementara pada skrin untuk memberikan maklum balas atau memaklumkan pengguna tentang sesuatu peristiwa.

Source Storybook

Penggunaan

Penggunaan Mudah

Untuk penggunaan mudah, AutoToast boleh digunakan secara terus untuk mengendalikan kes penggunaan biasa.

layout.tsx

import { AutoToast } from "@govtechmy/myds-react/toast";
 
// Letakkan komponen ini di bahagian atas dalam DOM
<AutoToast />;

Anatomi

// Kemudian, terbitkan atau hantar peristiwa baru kepada Toast
import { useToast } from "@govtechmy/myds-react/hooks";
 
export default () => (
  const { toast } = useToast();
<button
  onClick={() => {
    toast({ variant: "message",
    title: "Hello, world!",
    description: "this is a message toast description"
    });
  }}>
    Message
</button>
);

Penggunaan Lanjutan

Sebagai alternatif kepada penggunaan AutoToast, konstituensi komponen Toast boleh disusun secara manual.

import {
  ToastRoot,
  ToastIcon,
  ToastProgress,
  ToastProvider,
  ToastViewport,
  ToastTitle,
  ToastDescription,
} from "@govtechmy/myds-react/toast";
 
export default () => (
  <ToastProvider>
    {toasts.map((toast, index) => (
      <ToastRoot
        key={props.id || index}
        variant={toast.variant || "message"}
        {...props}
      >
        <ToastIcon />
        <div className="space-y-1">
          <ToastTitle>{toast.title}</ToastTitle>
          {toast.description && (
            <ToastDescription>{toast.description}</ToastDescription>
          )}
        </div>
        <ToastClose />
        <ToastProgress />
      </ToastRoot>
    ))}
 
    <ToastViewport />
  </ToastProvider>
);

Anatomi

// to publish or emit a new event to the Toast
import { useToast } from "@govtechmy/myds-react/hooks";
 
export default () => (
  const { toast } = useToast();
<button
  onClick={() => {
    toast({ variant: "message",
    title: "Hello, world!",
    description: "this is a message toast description"
    });
  }}>
    Message
</button>
);

Contoh

Variant

5 varian toast tersedia: message, info, success, warning dan error. Contoh penggunaan adalah:

Varian success boleh digunakan untuk menunjukkan tindakan yang berjaya seperti membuat permintaan baharu atau menghantar borang.
Varian warning boleh memberi amaran kepada pengguna untuk mengambil perhatian, sering digunakan untuk peringatan atau tindakan yang memerlukan perhatian, seperti melaporkan spam.
Varian info boleh memberikan maklumat tambahan untuk memastikan pengguna sentiasa maklum.
Varian error boleh digunakan untuk memberitahu pengguna tentang ralat yang memerlukan penyelesaian sebelum meneruskan.

Props

ToastProvider

ToastProvider menggunakan ToastProvider dari komponen perpustakaan Radix UI. Sila rujuk kepada rujukan API dalam documentasi ini.

ToastViewport

ToastViewport menggunakan ToastViewport dari komponen perpustakaan Radiux UI. Sila rujuk kepada rujukan API dalam dokumentasi ini.

ToastRoot

ToastRoot menggunakan ToastRoot dari komponen perpustakaan Radiux UI. Sila rujuk kepada rujukan API dalam dokumentasi ini.

Prop	Type	Default
`variant`	`enum`	`message`
`duration`	`number`	`5000`

MYDS