react-zoom-pan-pinch v3.7.0
๐ผ React Zoom Pan Pinch
Super fast and light react npm package for zooming, panning and pinching html elements in easy way
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
Try other BetterTyped projects
Do you like this library? Try out other projects
โกHyper Fetch - Fetching and realtime data exchange framework.
Installation
npm install --save react-zoom-pan-pinch
or
yarn add react-zoom-pan-pinch
Examples
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>
);
};
License
MIT ยฉ prc5
Help me keep working on this project โค๏ธ
๐ Our sponsors
4 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago