A react component to display zoomable images.
The zoom works both on mouse & touchscreen, and is done within the original bounds of the image.
- Hover over image to zoom
- Reset when mouse leaves image boundary
- Panning the image based on cursor position
- Scroll to +/- zoom within bounds
- Pinch gesture to zoom image
- Drag to pan image.
| Name | Type | Optional | Description |
|---|---|---|---|
| src | string | url or base64 string for the image | |
| alt | string | x | alt text for the image (using an aria-label) |
| zoom | number | default zoom on mouse hover | |
| maxZoom | number | maximum allowed zoom muliplication by scroll or touch pinch | |
| step | number | zoom step on mouse scroll | |
| width | number | x | override default width |
| height | number | x | override default height |
Width and height parameters are optional, but using them can avoid layout shift when the image loads. If only one is defined, the second one is derived from the image aspect ratio.
import { ZoomableImage } from "react-image-zoom-in-place";
export default function Home() {
return (
<div >
<ZoomableImage
src={"<image url or base64 here>"}
alt="alt text"
zoom={2}
maxZoom={10}
step={0.1}
/>
</div>
);
}
MIT