Reactでdialog試してみた。

作ったサンプル

dialog.tsx

import { useRef } from "react";

export function Dialog() {
  const dialogRef = useRef<HTMLDialogElement>(null);

  const handleShowDialogEvent = () => {
    if (dialogRef.current) {
      dialogRef.current.showModal();
    }
  }

  const handleCloseDialogEvent = () => {
    if (dialogRef.current) {
      dialogRef.current.close();
    }
  }

  return (
    <>
      <button onClick={handleShowDialogEvent}>ダイアログ表示</button>

      <dialog ref={dialogRef}>
        <h1>サンプル</h1>
        <div>ダイアログが表示される。</div>
        <button onClick={handleCloseDialogEvent}>閉じる</button>
      </dialog>
    </>
  )
}