useToast

Menguruskan acara kitaran hayat toast secara dinamik dari mana-mana sahaja dalam aplikasi.

Penggunaan

import { useToast } from "@govtechmy/myds-react/hooks";
 
const { toast } = useToast();
 
const handleClick = () => {
  toast({
    variant: "message",
    title: "Hello, world!",
    description: "Ini adalah deskripsi",
  });
};

Source

Penting

Pastikan <AutoToast /> anda atau komponen Toast yang dibina sendiri ditakrifkan di mana-mana dalam aplikasi anda untuk memaparkan notifikasi toast.

Contoh

Mencetuskan Acara Toast

Acara toast boleh dicetuskan dengan memanggil kaedah toast dari hook useToast. Tentukan objek ToastEvent dengan sifat yang diperlukan dan serahkannya kepada kaedah toast.

Contoh

import { useToast } from "@govtechmy/myds-react/hooks";
 
//... dalam komponen anda
const { toast } = useToast();
 
// Untuk toast mesej lalai.
// Cuba pelbagai varian: "success" | "info" | "warning" | "error"
toast({
  variant: "message",
  title: "Hello, world!",
  description: "Ini adalah maklumat tambahan",
});

Membina Komponen Toast yang Dibina Sendiri

Hook useToast menyediakan pengendali yang diperlukan untuk mendengar acara toast dari mana-mana sahaja dalam aplikasi anda. Ini boleh dicapai melalui pengendali subscribe dan unsubscribe dan boleh dilihat dalam Penggunaan Lanjutan dokumentasi Toast.

Toast.tsx

import { useEffect } from "react";
import { useToast } from "@govtechmy/myds-react/hooks";
 
//... dalam komponen anda
const { subscribe, unsubscribe } = useToast();
 
useEffect(() => {
  subscribe(); // Jalankan sekali untuk melanggan acara toast
  return () => {
    unsubscribe(); // Pada unmount, batalkan langganan dari acara toast
  };
}, []);

Mengakses Toast Aktif

Toast boleh diakses melalui objek toasts yang disediakan oleh hook useToast. Objek ini mengandungi array acara toast aktif.

Contoh

import { useToast } from "@govtechmy/myds-react/hooks";
 
const { toasts } = useToast();
console.log(toasts);

API

useTheme

Prop	Type	Default
`toast`	`(props: ToastEvent) => void`	-
`toasts`	`ToastEvent[]`	-
`subscribe`	`() => void`	-
`unsubscribe`	`() => void`	-

MYDS

useToast

Penggunaan

Contoh

Mencetuskan Acara Toast

Membina Komponen Toast yang Dibina Sendiri

Mengakses Toast Aktif

API

useTheme

Di halaman ini