https://github.com/retyui/react-fast-pinch-zoom
React component for pinch zooming DOM elements
https://github.com/retyui/react-fast-pinch-zoom
drag gestures pinch-to-zoom react react-component reactjs zoom
Last synced: 6 months ago
JSON representation
React component for pinch zooming DOM elements
- Host: GitHub
- URL: https://github.com/retyui/react-fast-pinch-zoom
- Owner: retyui
- Created: 2020-06-07T13:46:56.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-02-19T10:44:38.000Z (8 months ago)
- Last Synced: 2025-03-27T03:35:26.056Z (6 months ago)
- Topics: drag, gestures, pinch-to-zoom, react, react-component, reactjs, zoom
- Language: TypeScript
- Homepage: https://react-fast-pinch-zoom.netlify.app/
- Size: 265 KB
- Stars: 1
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# <PinchZoom/> - a react component for pinch zooming DOM elements.
[](https://github.com/retyui/react-fast-pinch-zoom/actions/workflows/nodejs.yml)
[](https://www.npmjs.com/package/react-fast-pinch-zoom)
[](https://www.npmtrends.com/react-fast-pinch-zoom)
[](https://bundlephobia.com/result?p=react-fast-pinch-zoom)
This is a migration of [GoogleChromeLabs/pinch-zoom](https://github.com/GoogleChromeLabs/pinch-zoom) to React!
## Demo
[Simple image pinch-zoom](https://react-fast-pinch-zoom.netlify.app/). 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 (
);
};
```
Now the above can be pinch-zoomed!
## API
```js
const App = () => {
const pinchZoomRef = React.useRef();
return (
![]()
);
};
```
### Properties
```js
pinchZoomRef.current.x; // x offset
pinchZoomRef.current.y; // y offset
pinchZoomRef.current.scale; // scale
```
### Methods
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",
});
```