react-use-pinch
v0.0.1
Published
A react hook for pinch and pan gesture on mobile device
Downloads
1
Maintainers
Readme
react-use-pinch
A react hook to handle Pinch and Pan Gesture on mobile devices
Install
npm install --save react-use-pinch
Usage
import * as React from 'react';
import { usePinch } from 'react-use-pinch';
const Example = () => {
const [ratio, setRatio] = useState(1.0);
const [offset, setOffset] = useState({
x: 0,
y: 0,
});
const [degree, setDegree] = useState(0);
const bind = usePinch({
onPinchStart: (movement) => {
console.log('on onPinchStart fired', movement);
},
onPinch: (movement) => {
setRatio(movement.scaleRatio);
setOffset(movement.center);
setDegree(movement.rotate);
console.log('on onPinch fired', movement);
},
onPinchEnd: () => {
console.log('on onPinchEnd fired');
setRatio(1);
setOffset({ x: 0, y: 0 });
setDegree(0);
},
});
const transform = `scale(${ratio}) translate(${offset.x}px, ${offset.y}px) rotate(${degree}deg)`;
return (
<div {...bind()} style={transform}>
<Other></Other>
</div>
);
};
License
MIT © JasonHeylon