Zoom dialog

ZoomDialog shows its content full screen, fitted to the width, and zooms and pans it like a photo: pinch, drag, double-tap, or the mouse wheel. Escape, Close or a click outside closes it.

Open the drawing

A small systempinch to zoomscroll or pinch to zoomClose

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open the drawing</Button>
<ZoomDialog open={open} title="A small system" onClose={() => setOpen(false)}>
  <svg viewBox="0 0 400 160">…</svg>
</ZoomDialog>;

An <img> or <svg> child fills the width. maxScale sets how far it zooms in; it defaults to 5.