🖼 React Zoom Pan Pinch
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
Sources
Key Features
🚀 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
Help me keep working on this project ❤️
Installation
npm install --save react-zoom-pan-pinch
or
yarn add react-zoom-pan-pinchExamples
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 } 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>
);
};License
MIT © prc5