← Back to context

Comment by robertoandred

13 days ago

I'm not sure what you're searching for or what you consider "wrapping it in React". You need some sort of JS to open and close it.

const Modal = ({ isOpen, onRequestClose, ...rest }: ComponentProps<"dialog"> & { isOpen: boolean; onRequestClose: () => unknown; }) => {

  const dialogRef = useRef<HTMLDialogElement>(null);

  useLayoutEffect(() => {
    if (isOpen) {
      dialogRef.current?.showModal();
    } else {
      dialogRef.current?.close();
    }
  }, [isOpen]);

  return (
    <dialog
      ref={dialogRef}
      onClose={(e) => {
        e.preventDefault();
        onRequestClose();
      }}
      {...rest}
    />
  );

};