@codemayonnaise/react-zoom-pan-pinch
v1.6.3
Published
Zoom and pan html elements in easy way
Downloads
4
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 many options
DEMO
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 | | 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!