import { useEffect } from "react"; import { createPortal } from "react-dom"; import Icon from "./Icon"; /** * Bildschirmfüllende Bildansicht. Schließt per Schließen-Knopf, Klick auf den * Hintergrund oder Escape. Wird per Portal an den gehängt, damit es über * allem liegt und nicht von Containern (overflow) abgeschnitten wird. */ export default function Lightbox({ src, alt, onClose }) { useEffect(() => { function onKey(e) { if (e.key === "Escape") onClose(); } document.addEventListener("keydown", onKey); const vorher = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = vorher; }; }, [onClose]); return createPortal( , document.body, ); }