Super fast and light react npm package for zooming, panning and pinching html elements in easy way
Do you like this library? Try out other projects ⚡Hyper Fetch
- 🚀 Fast and easy to use
- 🏭 Light, without external dependencies
- 💎 Mobile gestures, touchpad gestures and desktop mouse events support
- 🎁 Powerful context usage, which gives you a lot of freedom
- 🔧 Highly customizable
- 👑 Animations and Utils to create own tools
- 🔮 Advanced hooks and components
npm install --save react-zoom-pan-pinch
or
yarn add react-zoom-pan-pinchimport React, { Component } from "react";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
const Example = () => {
return (
<TransformWrapper>
<TransformComponent>
<img src="image.jpg" alt="test" />
</TransformComponent>
</TransformWrapper>
);
};or
import React, { Component } from "react";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
const Example = () => {
return (
<TransformWrapper
initialScale={1}
initialPositionX={200}
initialPositionY={100}
>
{({ zoomIn, zoomOut, resetTransform, ...rest }) => (
<React.Fragment>
<div className="tools">
<button onClick={() => zoomIn()}>+</button>
<button onClick={() => zoomOut()}>-</button>
<button onClick={() => resetTransform()}>x</button>
</div>
<TransformComponent>
<img src="image.jpg" alt="test" />
<div>Example text</div>
</TransformComponent>
</React.Fragment>
)}
</TransformWrapper>
);
};or
import React, { useRef } from "react";
import {
TransformWrapper,
TransformComponent,
ReactZoomPanPinchRef,
} from "react-zoom-pan-pinch";
const Controls = ({ zoomIn, zoomOut, resetTransform }) => (
<>
<button onClick={() => zoomIn()}>+</button>
<button onClick={() => zoomOut()}>-</button>
<button onClick={() => resetTransform()}>x</button>
</>
);
const Component = () => {
const transformComponentRef = useRef<ReactZoomPanPinchRef | null>(null);
const zoomToImage = () => {
if (transformComponentRef.current) {
const { zoomToElement } = transformComponentRef.current;
zoomToElement("imgExample");
}
};
return (
<TransformWrapper
initialScale={1}
initialPositionX={200}
initialPositionY={100}
ref={transformComponentRef}
>
{(utils) => (
<React.Fragment>
<Controls {...utils} />
<TransformComponent>
<img src="image.jpg" alt="test" id="imgExample" />
<div onClick={zoomToImage}>Example text</div>
</TransformComponent>
</React.Fragment>
)}
</TransformWrapper>
);
};MIT © prc5
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent