๐ผ React library to support easy zoom, pan, pinch on various html dom elements like and
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 - Fetching and realtime data exchange framework.
npm install --save react-zoom-pan-pinch
or
yarn add react-zoom-pan-pinch
import 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,
useControls,
} from "react-zoom-pan-pinch";
const Controls = () => {
const { zoomIn, zoomOut, resetTransform } = useControls();
return (
<div className="tools">
<button onClick={() => zoomIn()}>+</button>
<button onClick={() => zoomOut()}>-</button>
<button onClick={() => resetTransform()}>x</button>
</div>
);
};
const Example = () => {
return (
<TransformWrapper
initialScale={1}
initialPositionX={200}
initialPositionY={100}
>
{({ zoomIn, zoomOut, resetTransform, ...rest }) => (
<>
<Controls />
<TransformComponent>
<img src="image.jpg" alt="test" />
<div>Example text</div>
</TransformComponent>
</>
)}
</TransformWrapper>
);
};
MIT ยฉ prc5