4 ms·
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,
by robertoandred 2y 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}
/>
);
};
- spartanatreyu 2y agoI didn't need any JS here: <dialog open> <p>Greetings, one and all!</p> <form method="dialog"> <button>OK</button> </form> </dialog>
- robertoandred 2y agoAnd if you don’t want it open when you load the page?
- spartanatreyu 2y agoget rid of the open attribute