Modal Component

A modal dialog component built on native HTML dialog element, featuring ref-based control and customizable actions.

Live Preview

Usage

import { useRef } from 'react';
import Modal, { ModalRef, ModalTriggerButton } from '@react-daisyui-kit/components/Modal';

export default function App() {
  const modalRef = useRef<ModalRef>(null);

  return (
    <>
      <ModalTriggerButton id="my-modal">
        Open Modal
      </ModalTriggerButton>
      <Modal
        ref={modalRef}
        id="my-modal"
        title="Modal Title"
        okText="Confirm"
        closeText="Cancel"
        onOk={() => {
          console.log('OK clicked');
          modalRef.current?.close();
        }}
        onClose={() => {
          console.log('Modal closed');
        }}
      >
        <p>Modal content goes here.</p>
      </Modal>
    </>
  );
}

Features

HTML Dialog Element

Built on native HTML <dialog> element for true modality.

Ref-based Control

Use ref with ModalRef to programmatically open/close the modal.

Customizable Actions

Configure confirm and cancel buttons with custom text and callbacks.

Multiple Sizes

Support for XS to 7XL sizes to fit any content requirements.

Props

Prop	Type	Default	Description
id	string	-	Unique identifier for the modal
title	string	-	Modal title
children	ReactNode	-	Modal content
onOk	function	-	Callback when confirm button is clicked
okText	string	'確定'	Confirm button text
onClose	function	-	Callback when modal is closed
closeText	string	'取消'	Cancel button text
size	string	'md'	Modal size (xs, sm, md, lg, xl, 2xl, etc.)
loading	boolean	false	Disable buttons when loading

ModalRef

A ref interface that provides methods to control the modal programmatically. Passed to Modal via the ref prop.

Method	Description
open()	Programmatically open the modal (equivalent to calling showModal())
close()	Programmatically close the modal

const modalRef = useRef<ModalRef>(null);

// Open the modal
modalRef.current?.open();

// Close the modal
modalRef.current?.close();

ModalTriggerButton

A button component that triggers the modal to open. It connects to a Modal via the shared id prop.

Props

Prop	Type	Description
id	string	Must match the Modal's id to connect them
children	ReactNode	Button label or content

Usage

<ModalTriggerButton id="my-modal">
  Open Modal
</ModalTriggerButton>

<Modal id="my-modal" title="Title">
  Content
</Modal>

← Back to Components