Comment by robertoandred
19 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}
/>
);
};
No comments yet
Contribute on Hacker News ↗