Image Zoom

The ImageZoom component adds a click-to-zoom lightbox to any image. Clicking opens a fullscreen overlay so readers can examine screenshots and diagrams without leaving the page.

Quick Start

Wrap an image with the component.

<ImageZoom src="/img/screenshot.png" alt="Application screenshot" />

Adding Options

Constrain the thumbnail with explicit dimensions; the lightbox still scales to fit the viewport.

<ImageZoom
  src="/img/architecture-diagram.png"
  alt="System architecture diagram"
  width={800}
  height={600}
/>

Advanced

The lightbox is an accessible dialog: role="dialog", aria-modal="true", focus moves to the close button, focus is trapped, and Escape or clicking the backdrop closes it. Body scroll locks while open.

Options