← Back to context

Comment by robertoandred

10 months 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}
    />
  );

};