A pan and zoom component for React, using CSS transformations.

Depends only upon prop-types, react and react-dom modules.
Works on both desktop and mobile.

Online demo here!

• Zoom with the mouse-wheel or a two-finger pinch
• Zoom using double-click or double-tap
• Zoom on selected area and center

• Pan with the mouse pointer or with one finger when zoomed-in
• Intuitive panning depending on available space when zoomed-in
• Adjusts cursor style to indicate in which direction the element can be moved

If you want to contribute, feel free to send a merge request or open a discussion. Currently, I just have time to maintain the package, but not enough to make big changes or add important features.

All contribution would be quite appreciated! 😉

Among changes I would like to apply:

• Migrate to TypeScript
• Transform to a functional component (that could help splitting the code)
• Make motion logic less dependant to React

• The locked prop has been replaced by allowZoom and allowPan to handle zooming and panning events separately

• The package now requires React v16.3 or higher (in order to use react references)
• The zoom feature through gestures or mousewheel got some improvements to react better with all devices. You may need to adjust the scrollVelocity property passed to the component in order to keep the same effect.

$ npm i -D react-prismazoom

This project includes a full-featured application example.

First clone the project.

Then, install it:

$ npm i

Run the Webpack Dev Server:

$ npm run start

Go to http://localhost:1664.

Note: sources of this example can be found in example/src.

You can either run all tests at once:

$ npm test

Or run tests each time a change on source files occured:

$ npm run test:watch

import PrismaZoom from 'react-prismazoom'

<PrismaZoom>
  <img src="my-image.png" />
  <p>A text that can be zoomed and dragged</p>
</PrismaZoom>

Note: all props are optional.

These functions can be called from parent components.

zoomIn (value)
Increments the zoom with the given value.
Param {value: Number} : Zoom value

zoomOut (value)
Decrements the zoom with the given value.
Param {value: Number} : Zoom value

zoomToZone (relX, relY, relWidth, relHeight)
Zoom-in on the specified zone with the given relative coordinates and dimensions.
Param {relX: Number} : Relative X position of the zone left-top corner in pixels
Param {relY: Number} : Relative Y position of the zone left-top corner in pixels
Param {relWidth: Number} : Zone width in pixels
Param {relHeight: Number} : Zone height in pixels

reset ()
Resets the component to its initial state.

getZoom ()
Returns the current zoom value.
Return {Number} : Zone value

React PrismaZoom is licensed under the ISC license. See the LICENSE.md file for more details.