5.1.0 • Published 4 months ago
react-quick-pinch-zoom v5.1.0
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
Component features:
- 🔮 Simple. Easy to use;
- 🍎 It works with mobile touch gestures and desktop mouse events;
- ⚡ Fast, 60 FPS on mobile devices.
Links
Install
npm i --save react-quick-pinch-zoom
or
yarn add react-quick-pinch-zoom
Screenshots
Usage
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 (
<QuickPinchZoom onUpdate={onUpdate}>
<img ref={imgRef} src={IMG_URL} />
</QuickPinchZoom>
);
};
License
MIT © retyui
5.1.0
4 months ago
5.0.0
6 months ago
4.9.0
10 months ago
4.8.0
11 months ago
4.7.0
11 months ago
4.6.0
1 year ago
4.5.0
2 years ago
4.4.1
2 years ago
4.4.0
2 years ago
4.2.0-beta.0
2 years ago
4.3.0
2 years ago
4.2.0
2 years ago
4.1.0
2 years ago
4.0.2
3 years ago
4.0.1
3 years ago
4.0.0
3 years ago
3.0.0
4 years ago
3.0.0-beta.0
4 years ago
2.0.12
5 years ago
2.0.11
5 years ago
2.0.10
5 years ago
2.0.9
5 years ago
2.0.8
5 years ago
2.0.7
5 years ago
2.0.6
5 years ago
2.0.5
5 years ago
2.0.4
5 years ago
2.0.3
5 years ago
2.0.2
5 years ago
2.0.1
5 years ago
2.0.0
5 years ago
1.5.4
5 years ago
1.5.3
5 years ago
1.5.2
5 years ago
1.5.1
5 years ago
1.5.0
5 years ago
1.4.0
5 years ago
1.3.0
5 years ago
1.2.0
5 years ago
1.1.0
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago