React library to support easy Zoom, Pan, Pinch on various html dom elements like Images and Div’s. It is a Super fast and light react npm package for Zooming, Panning and Pinching html elements in easy way.
Features
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
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
Props Default Type disabled false boolean size 0.45 number animationTime 200 number animationType easeOut string
Props Default Type disabled false boolean step 6.5 number wheelEnabled true boolean touchPadEnabled true boolean limitsOnWheel true boolean
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
Props Default Type disabled false boolean
Props Default Type disabled false boolean step 70 number animation true boolean animationTime 200 number animationType easeOut string
Props Default Type disabled false boolean step 70 number animation true boolean animationTime 200 number animationType easeOut string
Props Default Type disabled false boolean step 70 number animation true boolean animationTime 200 number animationType easeOut string mode zoomIn zoomIn / zoomOut / reset
Props Default Type disabled false boolean animation true boolean animationTime 200 number animationType easeOut string
Value easeOut linear easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint
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
That’s it. Feel free to leave a comment.
Fast and easy to use
