@paryajafari/react-zoom-pan-pinch
v2.1.4
Published
Forked from prc5/react-zoom-pan-pinch
Downloads
24
Maintainers
Readme
react-zoom-pan-pinch
Super fast and light react npm package for zooming, panning and pinching html elements in easy way
Features
- :rocket: Fast and easy to use
- :factory: Light, without external dependencies
- :gem: Mobile gestures, touchpad gestures and desktop mouse events support
- :gift: Powerful context usage, which gives you a lot of freedom
- :wrench: Highly customizable
- :crown: Animations and Utils to create own tools
Install
npm install --save @paryajafari/react-zoom-pan-pinch
Usage
import React, { Component } from "react";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
class Example extends Component {
render() {
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";
class Example extends Component {
render() {
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>
);
}
}
License
MIT © prc5