<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 .

Usage

``sh
yarn add pinch-zoom-element
`

`js
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 }) => {
// Use CSS Custom Properties (Variables)
applyCssProperties(ref.current, { x, y, scale });

// Or use literal transform value
// ref.current.style.setProperty('transform',getTransform3DValue({x,y,scale}));
// ref.current.style.setProperty('transform',getTransform2DValue({x,y,scale}));
}, []);

return (

ref={ref}
alt="two black cats look at you"
src="https://cdn.glitch.com/d824d0c2-e771-4c9f-9fe2-a66b3ac139c5%2Fcats.jpg"
/>

);
};
`

Now the above can be pinch-zoomed!

API

`js
const App = () => {
const pinchZoomRef = React.useRef();

return (



);
};
`

$3

`js
pinchZoomRef.current.x; // x offset
pinchZoomRef.current.y; // y offset
pinchZoomRef.current.scale; // scale
`

$3

Set the transform. All values are optional.

`js
pinchZoomRef.current.setTransform({
scale: 1,
x: 0,
y: 0,
});
`

Scale in/out of a particular point.

`js
const scale = 2;

pinchZoomRef.current.scaleTo(scale, {
// Transform origin. Can be a number, or string percent, eg "50%"
originX: 0,
originY: 0,
// Should the transform origin be relative to the "container", or "content"?
relativeTo: "content",
});
``