react-quick-pinch-zoom


A react component that lets you zooming and dragging on any DOM element using multi-touch gestures on mobile devices
and mouse-events\wheel on desktop devices.
Based on this module manuelstofer/pinchzoom

$3

- 🔮 Simple. Easy to use;
- 🍎 It works with mobile touch gestures and desktop mouse events;
- ⚡ Fast, 60 FPS on mobile devices.

Links

- API documentation
- Web demos

Install

``bash
npm i --save react-quick-pinch-zoom
`
or
`bash
yarn add react-quick-pinch-zoom
`

Screenshots

![](https://media.giphy.com/media/ggJk8Rmysy6TcKJj5K/giphy.mp4)

Video...

Usage

`jsx harmony
import React, { useCallback, useRef } from "react";
import QuickPinchZoom, { make3dTransformValue } from "react-quick-pinch-zoom";

const IMG_URL =
"https://user-images.githubusercontent.com/4661784/" +
"56037265-88219f00-5d37-11e9-95ef-9cb24be0190e.png";

export const App = () => {
const imgRef = useRef();
const onUpdate = useCallback(({ x, y, scale }) => {
const { current: img } = imgRef;

if (img) {
const value = make3dTransformValue({ x, y, scale });

img.style.setProperty("transform", value);
}
}, []);

return (



);
};
``

License

MIT © retyui