Comment by robertoandred
Comment by robertoandred 16 hours 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}
/>
);
};