close modal with esc

This commit is contained in:
Martti Malmi 2023-10-05 14:40:13 +03:00
parent 38b647938e
commit 7587db9c8b

View File

@ -4,14 +4,25 @@ import { ReactNode, useEffect } from "react";
export interface ModalProps {
id: string;
className?: string;
onClose?: (e: React.MouseEvent) => void;
onClose?: (e: React.MouseEvent | KeyboardEvent) => void;
children: ReactNode;
}
export default function Modal(props: ModalProps) {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape" && props.onClose) {
props.onClose(e);
}
};
useEffect(() => {
document.body.classList.add("scroll-lock");
return () => document.body.classList.remove("scroll-lock");
document.addEventListener("keydown", handleKeyDown);
return () => {
document.body.classList.remove("scroll-lock");
document.removeEventListener("keydown", handleKeyDown);
};
}, []);
return (