Modal - React

Modal

Impor

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

Contoh Penggunaan

Contoh 1

Contoh 2

Global Provider Integration

Confirmation Provider Setup

ConfirmationProvider memungkinkan Anda memanggil modal konfirmasi secara imperatif menggunakan promise, tanpa perlu me-manage state isOpen atau render modal secara manual di setiap komponen.

import { ConfirmationProvider } from '@idds/react';
import { createRoot } from 'react-dom/client';
import App from './App';

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

Penggunaan (useConfirmation Hook)

Gunakan hook useConfirmation untuk menampilkan modal. Fungsi confirm() mengembalikan Promise yang akan resolve ke true (dikonfirmasi) atau false (dibatalkan).

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

export default function DeleteItem() {
  const { confirm } = useConfirmation();

  const handleDelete = async () => {
    // Memunculkan modal konfirmasi
    // Promise resolve dengan true jika user klik "Konfirmasi/Ya", false jika "Batal"
    const isConfirmed = await confirm({
      title: 'Hapus Data?',
      message: 'Apakah Anda yakin ingin menghapus data ini? Tindakan ini tidak dapat dibatalkan.',
      confirmText: 'Hapus',
      cancelText: 'Batal',
      confirmClassName: 'bg-red-600 hover:bg-red-700', // Custom class untuk tombol konfirmasi
    });

    if (isConfirmed) {
      console.log('User confirmed deletion');
      // Lakukan aksi hapus di sini
    }
  };

  return <Button onClick={handleDelete} className="bg-red-600 hover:bg-red-700 text-white border-none">Hapus Item</Button>;
}

Live Preview:

Props

Name	Type	Default	Required	Description
`open`	`boolean`	—	Yes	Apakah modal terbuka.
`onClose`	`() => void`	—	Yes	Callback saat modal ditutup.
`size?`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' \| ''`	`''`	No	Ukuran modal.
`title?`	`ReactNode`	—	No	Judul modal (opsional).
`children`	`ReactNode`	—	Yes	Konten modal.
`closeOnBackdrop?`	`boolean`	`true`	No	Apakah modal bisa ditutup dengan klik backdrop.
`container?`	`Element \| null`	`document.body`	No	Override target portal (default: document.body).
`dialogClassname?`	`string`	—	No	ClassName tambahan untuk dialog (bisa digunakan untuk size: ina-modal__dialog--size-{size}).