Toast - React

Toast

Impor

import { Toast } from '@idds/react';

Contoh Penggunaan

Contoh 1

Contoh 2

Global Provider Integration

Global Provider Setup

Untuk menggunakan Toast secara global, bungkus aplikasi Anda dengan ToastProvider di level root (misalnya di main.tsx atau App.vue). Ini memungkinkan Toast dipanggil dari komponen anak mana pun tanpa perlu render komponen Toast manual.

import { ToastProvider, setBrandTheme } from '@idds/react';
import { createRoot } from 'react-dom/client';
import App from './App';
import '@idds/react/index.css';

// Set brand theme
setBrandTheme('panrb');

createRoot(document.getElementById('root')!).render(
  <ToastProvider>
    <App />
  </ToastProvider>
);

Penggunaan (useToast Hook)

Gunakan hook useToast (React) atau composable useToast (Vue) di dalam komponen child untuk memicu notifikasi.

import { useToast, Button } from '@idds/react';

export default function MyComponent() {
  const { toast } = useToast();

  const handleShowToast = () => {
    toast({
      state: 'positive',
      title: 'Berhasil',
      description: 'Data berhasil disimpan',
      duration: 3000,
    });
  };

  return <Button onClick={handleShowToast}>Show Toast</Button>;
}

Live Preview:

Props

Name	Type	Default	Required	Description
`show`	`boolean`	—	Yes	Apakah toast ditampilkan.
`onClose`	`() => void`	—	Yes	Callback saat toast ditutup.
`title`	`ReactNode`	—	Yes	Judul toast.
`description?`	`ReactNode`	`''`	No	Deskripsi atau pesan toast (opsional).
`actionNode?`	`ReactNode`	—	No	Node untuk action button (opsional).
`state?`	`'default' \| 'destructive' \| 'positive'`	`'default'`	No	State toast.
`style?`	`'outline' \| 'solid'`	`'solid'`	No	Style toast.
`duration?`	`number`	`5000`	No	Durasi toast dalam milidetik sebelum auto-close.
`position?`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' \| 'top-middle' \| 'bottom-middle' \| 'left-middle' \| 'right-middle'`	`'top-right'`	No	Posisi toast di layar.
`className?`	`string`	`''`	No	ClassName tambahan.