react-image-zoom-in-place

A react component to display zoomable images.

The zoom works both on mouse & touchscreen, and is done within the original bounds of the image.

Behavior

Mouse

• Hover over image to zoom
• Reset when mouse leaves image boundary
• Panning the image based on cursor position
• Scroll to +/- zoom within bounds

Touchscreen

• Pinch gesture to zoom image
• Drag to pan image.

Props

| 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.

Usage

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>
  );
}

License

MIT

Git

https://github.com/MilanFIN/react-image-zoom-in-place

NPM

https://www.npmjs.com/package/react-image-zoom-in-place