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.<h2>Features</h2><ul><li>Fast and easy to use</li><li>Light, without external dependencies</li><li>Mobile gestures, touchpad gestures and desktop mouse events support</li><li>Powerful context usage, which gives you a lot of freedom</li><li>Highly customizable</li><li>Animations and many options</li></ul><a href="https://prc5.github.io/react-zoom-pan-pinch/" rel="noopener noreferrer" target="_blank" style="color: rgb(255, 255, 250);">Demo</a><a href="https://github.com/prc5/react-zoom-pan-pinch/" rel="noopener noreferrer" target="_blank">Github</a><h2>Install</h2><pre class="ql-syntax" spellcheck="false">npm install --save react-zoom-pan-pinch
</pre>OR<pre class="ql-syntax" spellcheck="false">yarn add react-zoom-pan-pinch
</pre><h2>Usage</h2><pre class="ql-syntax" spellcheck="false">import React, { Component } from "react";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

class Example extends Component {
 render() {
 return (
 &lt;TransformWrapper&gt;&lt;TransformComponent&gt;&lt;img src="image.jpg" alt="test" /&gt;&lt;/TransformComponent&gt;&lt;/TransformWrapper&gt;
 );
 }
}
</pre>OR<pre class="ql-syntax" spellcheck="false">import React, { Component } from "react";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

class Example extends Component {
 render() {
 return (
 &lt;TransformWrapperdefaultScale={1}defaultPositionX={200}defaultPositionY={100}
 &gt;
 {({ zoomIn, zoomOut, resetTransform, ...rest }) =&gt; (
 &lt;React.Fragment&gt;&lt;div className="tools"&gt;&lt;button onClick={zoomIn}&gt;+&lt;/button&gt;&lt;button onClick={zoomOut}&gt;-&lt;/button&gt;&lt;button onClick={resetTransform}&gt;x&lt;/button&gt;&lt;/div&gt;&lt;TransformComponent&gt;&lt;img src="image.jpg" alt="test" /&gt;&lt;div&gt;Example text&lt;/div&gt;&lt;/TransformComponent&gt;&lt;/React.Fragment&gt;
 )}
 &lt;/TransformWrapper&gt;
 );
 }
}
</pre><h2>Props of TransformWrapper</h2>PropsDefaultTypescale1numberpositionXautonumberpositionYautonumberdefaultPositionXnullnumberdefaultPositionYnullnumberdefaultScalenullnumberoptions{...}objectwheel{...}objectpan{...}objectpinch{...}objectzoomIn{...}objectzoomOut{...}objectdoubleClick{...}objectreset{...}objectscalePadding{...}objectonWheelStartnullFunctiononWheelnullFunctiononWheelStopnullFunctiononPanningStartnullFunctiononPanningnullFunctiononPanningStopnullFunctiononPinchingStartnullFunctiononPinchingnullFunctiononPinchingStopnullFunctiononZoomChangenullFunctionenablePaddingtrueBooleanenablePanPaddingtrueBoolean<h4>Options prop elements</h4>PropsDefaultTypedisabledfalsebooleantransformEnabledtruebooleanminPositionXnullnull, numbermaxPositionXnullnull, numberminPositionYnullnull, numbermaxPositionYnullnull, numberminScale1numbermaxScale8numberlimitToBoundstruebooleanlimitToWrapperfalsebooleancenterContenttrueboolean<h4>scalePadding prop elements</h4>PropsDefaultTypedisabledfalsebooleansize0.45numberanimationTime200numberanimationTypeeaseOutstring<h4>Wheel prop elements</h4>PropsDefaultTypedisabledfalsebooleanstep6.5numberwheelEnabledtruebooleantouchPadEnabledtruebooleanlimitsOnWheeltrueboolean<h4>Pan prop elements</h4>PropsDefaultTypedisabledfalsebooleandisableOnTarget[]array of class names or node tags (div,span...)lockAxisXfalsebooleanlockAxisYfalsebooleanvelocityfalsebooleanvelocityEqualToMovefalsebooleanvelocitySensitivity1numbervelocityMinSpeed1.2numbervelocityBaseTime1800numbervelocityAnimationTypeeaseOutstringpaddingtruebooleanpaddingSize40numberanimationTime200numberanimationTypeeaseOutstring<h4>Pinch prop elements</h4>PropsDefaultTypedisabledfalseboolean<h4>zoomIn prop elements</h4>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstring<h4>zoomOut prop elements</h4>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstring<h4>doubleClick prop elements</h4>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstringmodezoomInzoomIn / zoomOut / reset<h4>reset prop elements</h4>PropsDefaultTypedisabledfalsebooleananimationtruebooleananimationTime200numberanimationTypeeaseOutstring<h4>Animations types</h4>ValueeaseOutlineareaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuint<h4>Double click modes</h4>ValuezoomInzoomOutreset<h2>Values returned from TransformWrapper component</h2>ValueDescriptionTypesetScale(scale, animationTime, animationType)Sets scaleNumbersetPositionX(positionX, animationTime, animationType)Sets position xNumbersetPositionY(positionY, animationTime, animationType)Sets position yNumberzoomIn()Zooming in function, used for controls button---zoomOut()Zooming out function, used for controls button---setTransform(positionX, positionY, scale, animationTime, animationType)Sets transformations of contentNumber or nullresetTransform()Reset transformations to the initial valuesNumber<h2>License</h2>MIT ©&nbsp;<a href="https://github.com/prc5" rel="noopener noreferrer" target="_blank">prc5</a>That's it. Feel free to leave a comment.

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...

React library to implement Zoom, Pan, Pinch on HTML Elements