Comment by robertoandred
1 day 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 ↗