Enables zooming and panning an image, both mobile and desktop.
npm install react-responsive-pinch-zoom-panimg element. Both mobile and desktop browsers are supported. In desktop mode, you zoom with the mouse scrollwheel, and pan by dragging.
npm install react-responsive-pinch-zoom-pan --save
git clone https://github.com/bradstiff/react-responsive-pinch-zoom-pan.git
cd react-responsive-pinch-zoom-pan
npm install
npm start
javascript
import React from "react";
import PinchZoomPan from "react-responsive-pinch-zoom-pan";
const App = () => {
return (
);
};
`
API
Prop | Type | Default | Description
------------|-----------|-----------|--------------------------------------------------------------------------------------------------------------------
initialScale| number | 'auto' | The initial scale of the image. When auto, the image will be proportionally 'autofit' to the container.
minScale | number | 'auto' | The minimum scale to which the image can be zoomed out. When auto, the minimum scale is the 'autofit' scale.
maxScale | number | 1 | The maximum scale to which the image can be zoomed in.
position | 'center' or 'topLeft' | 'topLeft' | Position of the image relative to the container. Applies when the scaled image is smaller than the container.
zoomButtons | bool | true | Render plus (+) and minus (-) buttons on top of the image as another way to access the zoom feature.
doubleTapBehavior | 'reset' or 'zoom' | 'reset' | Whether to zoom in or reset to initial scale on double-click / double-tap.
Development
You're welcome to contribute to react-responsive-pinch-zoom-pan.
To set up the project:
1. Fork and clone the repository
2. npm install
3. npm start`