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}
/>
);
};
I didn't need any JS here:
And if you don’t want it open when you load the page?
get rid of the open attribute