Components

Image Zoom

Click-to-zoom images with medium-zoom

Add click-to-zoom functionality to images. Powered by medium-zoom.

Basic Usage

Click the image above to zoom in. Click again or press Esc to close.

<ImageZoom client:load src="/images/screenshot.png" alt="Screenshot" />

With High-Resolution Zoom Source

Use zoomSrc to load a higher-resolution image when zoomed:

<ImageZoom
  client:load
  src="/images/thumbnail.png"
  zoomSrc="/images/full-resolution.png"
  alt="Architecture diagram"
/>

With Custom Dimensions

<ImageZoom client:load src="/images/diagram.png" alt="Diagram" width={600} height={400} />

Props