How to control DaisyUI Modal after update to v3 in ReactJS?

Question

After the update to version 3 of DaisyUI, I no longer have control over how the responsive modal opens and closes. I am using ReactJS. Can someone please help me?

// modal button
<button className="btn" onClick={()=>window.my_modal_5.showModal()}>open modal</button>

// modal
<dialog id="my_modal_5" className="modal modal-bottom sm:modal-middle">
  <form method="dialog" className="modal-box">
    <h3 className="font-bold text-lg">Hello!</h3>
    <p className="py-4">Press ESC key or click the button below to close</p>
    <div className="modal-action">
      {/* if there is a button in form, it will close the modal */}
      <button className="btn">Close</button>
    </div>
  </form>
</dialog>

It says, "Open the modal using ID.showModal() method" I just don't understand what that means. In the last version of DaisyUI, this trouble was not there. I'm using this for an old project, I also updated the daisyUI npm package in my project.

Answer 1

With daisyui v3 the preferred way to use a modal is using the new Html-dialog-element, which is supported by all browsers.

The benefits of using the Html-dialog-element are manifold. Check out this useful blog-post: https://blog.webdevsimplified.com/2023-04/html-dialog/

Do use it in react, checkout this example:

function Modal({title, text, visible, onClose}) {
  const modalRef = useRef(null);

  useEffect(() => {
    if (!modalRef.current) {
      return;
    }
    visible ? modalRef.current.showModal() : modalRef.current.close();
  }, [visible]);

  const handleClose = () => {
    if (onClose) {
      onClose();
    }
  }

  const handleESC = (event) => {
    event.preventDefault();
    handleClose();
  }

  return (
    <dialog ref={modalRef} id="my_modal_1" className="modal" onCancel={handleESC}>
      <form method="dialog" className="modal-box">
        <h3 className="font-bold text-lg">Hello!</h3>
        <p className="py-4">Press ESC key or click the button below to close</p>
        <div className="modal-action">
          {/* if there is a button in form, it will close the modal */}
          <button className="btn" onClick={handleClose}>Close</button>
        </div>
      </form>
    </dialog>
  );
}