react-responsive-pinch-zoom-pan-withoutwheel
v0.2.14
Published
Enables zooming and panning an image, both mobile and desktop.
Downloads
37
Maintainers
Readme
react-responsive-pinch-zoom-pan-withoutwheel
A React component that adds pinch-zoom and pan capability to an <img>
element. Both mobile and desktop browsers are supported. On desktop browsers, zoom is triggered via the mouse scrollwheel.
Zoom and pan are applied using CSS transforms.
Install
npm install react-responsive-pinch-zoom-pan-withoutwheel --save
Try it out
Online
Local
git clone https://github.com/bradstiff/react-responsive-pinch-zoom-pan-withoutwheel.git
cd react-responsive-pinch-zoom-pan-withoutwheel
npm install
npm start
- Browse to http://localhost:3001
Usage
import React from "react";
import PinchZoomPan from "react-responsive-pinch-zoom-pan-withoutwheel";
const App = () => {
return (
<div style={{ width: '500px', height: '500px' }}>
<PinchZoomPan>
<img alt='Test Image' src='http://via.placeholder.com/750x750' />
</PinchZoomPan>
</div>
);
};