Sha256: 00b0cf5279b4c152fc156ecb7570f886151fc1eea61bac2a69d35b603b216690
Contents?: true
Size: 1.11 KB
Versions: 5
Compression:
Stored size: 1.11 KB
Contents
import React, { useEffect } from "react";
import useModalStore from "../stores/useModalStore";
export default function Modal() {
const component = useModalStore((state) => state.component);
const close = useModalStore((state) => state.close);
const handleClose = (evt: Event) => {
evt.stopPropagation();
evt.preventDefault();
close();
};
const handleKeypress = (evt: KeyboardEvent) => {
if (component && (evt.key == "Escape" || evt.keyCode === 27)) {
handleClose(evt);
}
};
useEffect(() => {
if (component) {
document.body.classList.add("modal");
} else {
document.body.classList.remove("modal");
}
}, [component]);
useEffect(() => {
window.addEventListener("keypress", handleKeypress);
return () => {
window.removeEventListener("keypress", handleKeypress);
};
}, []);
if (component) {
return (
<div className="modal-wrapper open">
<div className="background" onClick={handleClose} />
<div className="modal">{component}</div>
</div>
);
} else {
return <div className="modal-wrapper"></div>;
}
}
Version data entries
5 entries across 5 versions & 1 rubygems