react-zoom-pan-pinch
Super fast and light react npm package for zooming, panning and pinching html
elements in easy way
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 many options
DEMO
DEMO EXAMPLE
Install
npm install --save react-zoom-pan-pinch
or
yarn add 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
defaultScale={1}
defaultPositionX={200}
defaultPositionY={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>
);
}
}
Props of TransformWrapper
Props |
Default |
Type |
scale |
1 |
number |
positionX |
auto |
number |
positionY |
auto |
number |
defaultPositionX |
null |
number |
defaultPositionY |
null |
number |
defaultScale |
null |
number |
options |
{...} |
object |
wheel |
{...} |
object |
pan |
{...} |
object |
pinch |
{...} |
object |
zoomIn |
{...} |
object |
zoomOut |
{...} |
object |
doubleClick |
{...} |
object |
reset |
{...} |
object |
scalePadding |
{...} |
object |
onWheelStart |
null |
Function |
onWheel |
null |
Function |
onWheelStop |
null |
Function |
onPanningStart |
null |
Function |
onPanning |
null |
Function |
onPanningStop |
null |
Function |
onPinchingStart |
null |
Function |
onPinching |
null |
Function |
onPinchingStop |
null |
Function |
onZoomChange |
null |
Function |
enablePadding |
true |
Boolean |
enablePanPadding |
true |
Boolean |
Options prop elements
Props |
Default |
Type |
disabled |
false |
boolean |
transformEnabled |
true |
boolean |
minPositionX |
null |
null, number |
maxPositionX |
null |
null, number |
minPositionY |
null |
null, number |
maxPositionY |
null |
null, number |
minScale |
1 |
number |
maxScale |
8 |
number |
limitToBounds |
true |
boolean |
limitToWrapper |
false |
boolean |
centerContent |
true |
boolean |
scalePadding prop elements
Props |
Default |
Type |
disabled |
false |
boolean |
size |
0.45 |
number |
animationTime |
200 |
number |
animationType |
easeOut |
string |
Wheel prop elements
Props |
Default |
Type |
disabled |
false |
boolean |
step |
6.5 |
number |
wheelEnabled |
true |
boolean |
touchPadEnabled |
true |
boolean |
limitsOnWheel |
true |
boolean |
Pan prop elements
Props |
Default |
Type |
disabled |
false |
boolean |
wheelEnabled |
false |
boolean |
disableOnTarget |
[] |
array of class names or node tags (div,span...) |
lockAxisX |
false |
boolean |
lockAxisY |
false |
boolean |
velocity |
false |
boolean |
velocityEqualToMove |
false |
boolean |
velocitySensitivity |
1 |
number |
velocityMinSpeed |
1.2 |
number |
velocityBaseTime |
1800 |
number |
velocityAnimationType |
easeOut |
string |
padding |
true |
boolean |
paddingSize |
40 |
number |
animationTime |
200 |
number |
animationType |
easeOut |
string |
Pinch prop elements
Props |
Default |
Type |
disabled |
false |
boolean |
zoomIn prop elements
Props |
Default |
Type |
disabled |
false |
boolean |
step |
70 |
number |
animation |
true |
boolean |
animationTime |
200 |
number |
animationType |
easeOut |
string |
zoomOut prop elements
Props |
Default |
Type |
disabled |
false |
boolean |
step |
70 |
number |
animation |
true |
boolean |
animationTime |
200 |
number |
animationType |
easeOut |
string |
doubleClick prop elements
Props |
Default |
Type |
disabled |
false |
boolean |
step |
70 |
number |
animation |
true |
boolean |
animationTime |
200 |
number |
animationType |
easeOut |
string |
mode |
zoomIn |
zoomIn / zoomOut / reset |
reset prop elements
Props |
Default |
Type |
disabled |
false |
boolean |
animation |
true |
boolean |
animationTime |
200 |
number |
animationType |
easeOut |
string |
Animations types
Value |
easeOut |
linear |
easeInQuad |
easeOutQuad |
easeInOutQuad |
easeInCubic |
easeOutCubic |
easeInOutCubic |
easeInQuart |
easeOutQuart |
easeInOutQuart |
easeInQuint |
easeOutQuint |
easeInOutQuint |
Double click modes
Value |
zoomIn |
zoomOut |
reset |
Values returned from TransformWrapper component
Value |
Description |
Type |
setScale(scale, animationTime, animationType) |
Sets scale |
Number |
setPositionX(positionX, animationTime, animationType) |
Sets position x |
Number |
setPositionY(positionY, animationTime, animationType) |
Sets position y |
Number |
zoomIn() |
Zooming in function, used for controls button |
--- |
zoomOut() |
Zooming out function, used for controls button |
--- |
setTransform(positionX, positionY, scale, animationTime, animationType) |
Sets transformations of content |
Number or null |
resetTransform() |
Reset transformations to the initial values |
Number |
License
MIT © prc5
Contributors ✨
Thanks goes to these wonderful people
(emoji key):
This project follows the
all-contributors
specification. Contributions of any kind welcome!