Zoom

1"use client";
2 
3import * as React from "react";
4import { createPortal } from "react-dom";
5import "./zoom.css";
6 
7export interface ZoomProps {
8  children: React.ReactNode;
9  caption?: React.ReactNode;
10}
11 
12/** Lightbox affordance. Esc and click-outside close it. */
13export function Zoom({ children, caption }: ZoomProps) {
14  const [open, setOpen] = React.useState(false);
15  const [mounted, setMounted] = React.useState(false);
16  const opener = React.useRef<HTMLButtonElement>(null);
17 
18  React.useEffect(() => setMounted(true), []);
19 
20  React.useEffect(() => {
21    if (!open) return;
22    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
23    document.addEventListener("keydown", onKey);
24    const prev = document.body.style.overflow;
25    document.body.style.overflow = "hidden";
26    return () => {
27      document.removeEventListener("keydown", onKey);
28      document.body.style.overflow = prev;
29      opener.current?.focus();
30    };
31  }, [open]);
32 
33  return (
34    <>
35      <button
36        ref={opener}
37        type="button"
38        className="moco-plate-zoom"
39        aria-label="Enlarge this figure"
40        onClick={() => setOpen(true)}
41      >
42        ⤢
43      </button>
44      {children}
45      {mounted && open
46        ? createPortal(
47            <div
48              className="moco-lightbox"
49              role="dialog"
50              aria-modal="true"
51              aria-label="Enlarged figure"
52              onClick={(e) => e.target === e.currentTarget && setOpen(false)}
53            >
54              <div className="moco-lightbox-inner">
55                {children}
56                {caption ? <figcaption className="moco-cap">{caption}</figcaption> : null}
57                <button
58                  type="button"
59                  className="moco-btn-sm"
60                  style={{ marginTop: "1rem" }}
61                  onClick={() => setOpen(false)}
62                >
63                  Close (Esc)
64                </button>
65              </div>
66            </div>,
67            document.body,
68          )
69        : null}
70    </>
71  );
72}