<PinchZoom/> - a react component for pinch zooming DOM elements.
This is a migration of GoogleChromeLabs/pinch-zoom to React!
Demo
Simple image pinch-zoom. Although you can put any element in <PinchZoom/>
.
Usage
yarn add pinch-zoom-element
import React, { useRef, useCallback } from "react";
import {
PinchZoom,
applyCssProperties,
getTransform3DValue,
getTransform2DValue,
} from "react-fast-pinch-zoom";
const App = () => {
const ref = useRef(null);
const onTransform = useCallback(({ x, y, scale }) => {
applyCssProperties(ref.current, { x, y, scale });
}, []);
return (
<PinchZoom onTransform={onTransform}>
<img
ref={ref}
alt="two black cats look at you"
src="https://cdn.glitch.com/d824d0c2-e771-4c9f-9fe2-a66b3ac139c5%2Fcats.jpg"
/>
</PinchZoom>
);
};
Now the above can be pinch-zoomed!
API
const App = () => {
const pinchZoomRef = React.useRef();
return (
<PinchZoom ref={pinchZoomRef}>
<img />
</PinchZoom>
);
};
Properties
pinchZoomRef.current.x;
pinchZoomRef.current.y;
pinchZoomRef.current.scale;
Methods
Set the transform. All values are optional.
pinchZoomRef.current.setTransform({
scale: 1,
x: 0,
y: 0,
});
Scale in/out of a particular point.
const scale = 2;
pinchZoomRef.current.scaleTo(scale, {
originX: 0,
originY: 0,
relativeTo: "content",
});