1.0.1 • Published 3 years ago
Share package react-zoom-pan-pinch-scroll This is an improved version of the react-zoom-pan-pinch library with an improved scrolling behaviour for Mac Os.
This version enables a much better user experience for your app's mac users.
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 DEMO EXAMPLE
Install npm install --save react-zoom-pan-pinchor
yarn add react-zoom-pan-pinchUsage 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 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!
