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

<span class="hljs-keyword">class</span> <span class="hljs-title class_">Example</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> {
  <span class="hljs-title function_">render</span>() {
    <span class="hljs-keyword">return</span> (
      <span class="hljs-tag">&lt;<span class="hljs-name">TransformWrapper</span>&gt;&lt;<span class="hljs-name">TransformComponent</span>&gt;&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"test"</span> /&gt;&lt;/<span class="hljs-name">TransformComponent</span>&gt;&lt;/<span class="hljs-name">TransformWrapper</span>&gt;</span>
    );
  }
}
</pre><p>OR</p><pre class="ql-syntax" spellcheck="false"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { <span class="hljs-title class_">Component</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">TransformWrapper</span>, <span class="hljs-title class_">TransformComponent</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-zoom-pan-pinch"</span>;

<span class="hljs-keyword">class</span> <span class="hljs-title class_">Example</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> {
  <span class="hljs-title function_">render</span>() {
    <span class="hljs-keyword">return</span> (
      &lt;<span class="hljs-title class_">TransformWrapperdefaultScale</span>={<span class="hljs-number">1</span>}defaultPositionX={<span class="hljs-number">200</span>}defaultPositionY={<span class="hljs-number">100</span>}
      &gt;
        {<span class="hljs-function">(<span class="hljs-params">{ zoomIn, zoomOut, resetTransform, ...rest }</span>) =&gt;</span> (
          <span class="hljs-tag">&lt;<span class="hljs-name">React.Fragment</span>&gt;&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"tools"</span>&gt;&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{zoomIn}</span>&gt;</span>+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{zoomOut}</span>&gt;</span>-<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{resetTransform}</span>&gt;</span>x<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;&lt;/<span class="hljs-name">div</span>&gt;&lt;<span class="hljs-name">TransformComponent</span>&gt;&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"test"</span> /&gt;&lt;<span class="hljs-name">div</span>&gt;</span>Example text<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;&lt;/<span class="hljs-name">TransformComponent</span>&gt;&lt;/<span class="hljs-name">React.Fragment</span>&gt;</span>
        )}
      &lt;/<span class="hljs-title class_">TransformWrapper</span>&gt;
    );
  }
}
</pre><h2>Props of TransformWrapper</h2><p>PropsDefaultTypescale1numberpositionXautonumberpositionYautonumberdefaultPositionXnullnumberdefaultPositionYnullnumberdefaultScalenullnumberoptions{...}objectwheel{...}objectpan{...}objectpinch{...}objectzoomIn{...}objectzoomOut{...}objectdoubleClick{...}objectreset{...}objectscalePadding{...}objectonWheelStartnullFunctiononWheelnullFunctiononWheelStopnullFunctiononPanningStartnullFunctiononPanningnullFunctiononPanningStopnullFunctiononPinchingStartnullFunctiononPinchingnullFunctiononPinchingStopnullFunctiononZoomChangenullFunctionenablePaddingtrueBooleanenablePanPaddingtrueBoolean</p><h4>Options prop elements</h4><p>PropsDefaultTypedisabledfalsebooleantransformEnabledtruebooleanminPositionXnullnull, numbermaxPositionXnullnull, numberminPositionYnullnull, numbermaxPositionYnullnull, numberminScale1numbermaxScale8numberlimitToBoundstruebooleanlimitToWrapperfalsebooleancenterContenttrueboolean</p><h4>scalePadding prop elements</h4><p>PropsDefaultTypedisabledfalsebooleansize0.45numberanimationTime200numberanimationTypeeaseOutstring</p><h4>Wheel prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep6.5numberwheelEnabledtruebooleantouchPadEnabledtruebooleanlimitsOnWheeltrueboolean</p><h4>Pan prop elements</h4><p>PropsDefaultTypedisabledfalsebooleandisableOnTarget[]array of class names or node tags (div,span...)lockAxisXfalsebooleanlockAxisYfalsebooleanvelocityfalsebooleanvelocityEqualToMovefalsebooleanvelocitySensitivity1numbervelocityMinSpeed1.2numbervelocityBaseTime1800numbervelocityAnimationTypeeaseOutstringpaddingtruebooleanpaddingSize40numberanimationTime200numberanimationTypeeaseOutstring</p><h4>Pinch prop elements</h4><p>PropsDefaultTypedisabledfalseboolean</p><h4>zoomIn prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstring</p><h4>zoomOut prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstring</p><h4>doubleClick prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstringmodezoomInzoomIn / zoomOut / reset</p><h4>reset prop elements</h4><p>PropsDefaultTypedisabledfalsebooleananimationtruebooleananimationTime200numberanimationTypeeaseOutstring</p><h4>Animations types</h4><p>ValueeaseOutlineareaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuint</p><h4>Double click modes</h4><p>ValuezoomInzoomOutreset</p><h2>Values returned from TransformWrapper component</h2><p>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</p><h2>License</h2><p>MIT ©&nbsp;<a href="https://github.com/prc5" rel="noopener noreferrer" target="_blank">prc5</a></p><p>That's it. Feel free to leave a comment.</p>

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

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

<p>In this example we will show how to implement the component scrolling via mouse drag &amp; drop like Google Map, Google Earth, Figma etc.</p>
<p>To implement the scrolling we will use the <code><a href="https://github.com/Norserium/react-indiana-drag-scroll" target="_blank" rel="noopener noreferrer">react-indiana-drag-scroll</a></code> library which is great library to Implement scroll on drag.</p>
<p>So let's get started.</p>
<h2>Demo</h2>
<p>Try it yourself! Go to&nbsp;<a href="https://norserium.github.io/react-indiana-drag-scroll/" target="_blank" rel="noopener noreferrer">demo website</a> / <a href="https://codesandbox.io/s/react-indiana-drag-scroll-default-iw9xh" target="_blank" rel="noopener noreferrer">sandbox</a></p>
<h2>Install</h2>
<pre class="ql-syntax" spellcheck="false">npm install <span class="hljs-attr">--save</span> react-indiana-drag-scroll
</pre>
<p>or install via yarn</p>
<pre class="ql-syntax" spellcheck="false">yarn add react-indiana-drag-scroll
</pre>
<h2>Usage</h2>
<pre class="ql-syntax" spellcheck="false"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { <span class="hljs-title class_">Component</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> <span class="hljs-title class_">ScrollContainer</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'react-indiana-drag-scroll'</span>;
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Example</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> {
    <span class="hljs-title function_">render</span> () {
        <span class="hljs-keyword">return</span> (
            <span class="hljs-tag">&lt;<span class="hljs-name">ScrollContainer</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"scroll-container"</span>&gt;</span>
                { ... }
            <span class="hljs-tag">&lt;/<span class="hljs-name">ScrollContainer</span>&gt;</span>
        )
    }
}
</pre>
<div class="markdown-heading" dir="auto">
<h2 class="heading-element" dir="auto" tabindex="-1">Component properties</h2>
<a id="user-content-component-properties" class="anchor" href="https://github.com/Norserium/react-indiana-drag-scroll#component-properties" aria-label="Permalink: Component properties"></a></div>
<table>
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>vertical</td>
<td>Bool</td>
<td>Allow vertical drag scrolling</td>
<td>true</td>
</tr>
<tr>
<td>horizontal</td>
<td>Bool</td>
<td>Allow horizontal drag scrolling</td>
<td>true</td>
</tr>
<tr>
<td>hideScrollbars</td>
<td>Bool</td>
<td>Hide the scrollbars</td>
<td>true</td>
</tr>
<tr>
<td>activationDistance</td>
<td>Number</td>
<td>The distance that distinguish click and drag start</td>
<td>10</td>
</tr>
<tr>
<td>children</td>
<td>Node</td>
<td>The content of scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onScroll</td>
<td>Function</td>
<td>Invoked when user scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onEndScroll</td>
<td>Function</td>
<td>Invoked when user ends scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onStartScroll</td>
<td>Function</td>
<td>Invoked when user starts scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onClick</td>
<td>Function</td>
<td>Invoked when user clicks the scrolling container without dragging</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>component</td>
<td>String</td>
<td>The component used for the root node.</td>
<td>'div'</td>
</tr>
<tr>
<td>className</td>
<td>String</td>
<td>The custom classname for the container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>draggingClassName</td>
<td>String</td>
<td>The classname for the container during dragging</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>style</td>
<td>Number</td>
<td>The custom styles for the container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>innerRef</td>
<td>ElementType</td>
<td>The ref to the root node (experimental alternative to&nbsp;<code>getElement</code>)</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>ignoreElements</td>
<td>String</td>
<td>Selector for elements that should not trigger the scrolling behaviour (for example,&nbsp;<code>".modal, dialog"</code>&nbsp;or&nbsp;<code>"*[prevent-drag-scroll]"</code>)</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>nativeMobileScroll</td>
<td>Bool</td>
<td>Use native mobile drag scroll for mobile devices</td>
<td>true</td>
</tr>
<tr>
<td>buttons</td>
<td>Array</td>
<td>The list of mouse button numbers that will activate the scroll by drag</td>
<td>[0]</td>
</tr>
</tbody>
</table>
<div class="markdown-heading" dir="auto">
<h2 class="heading-element" dir="auto" tabindex="-1">Static functions</h2>
<a id="user-content-static-functions" class="anchor" href="https://github.com/Norserium/react-indiana-drag-scroll#static-functions" aria-label="Permalink: Static functions"></a></div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Returns</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>getElement</td>
<td>HTMLElement</td>
<td>Returns the HTML element</td>
</tr>
</tbody>
</table>
<h2>How to set the initial scroll?</h2>
<p>To set initial scroll you need get the ref to the root node of the&nbsp;<code>ScrollContainer</code>. It can be implemented by&nbsp;<a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-innerref-0g8v5?file=/index.js" target="_blank" rel="noopener noreferrer">using&nbsp;</a><code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-innerref-0g8v5?file=/index.js" target="_blank" rel="noopener noreferrer">innerRef</a></code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-innerref-0g8v5?file=/index.js" target="_blank" rel="noopener noreferrer">property</a>&nbsp;or&nbsp;<a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-getelement-99o6q" target="_blank" rel="noopener noreferrer">the static function&nbsp;</a><code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-getelement-99o6q" target="_blank" rel="noopener noreferrer">getElement</a></code>. At the worst you can use the&nbsp;<code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-finddomnode-dvdop" target="_blank" rel="noopener noreferrer">ReactDOM.findDOMNode</a></code>&nbsp;method.</p>
<h2>License</h2>
<p>The source code is licensed under MIT, all images (except&nbsp;<a href="https://www.freepik.com/free-vector/ancient-egypt-hieroglyphics-background-with-flat-design_2754100.htm" target="_blank" rel="noopener noreferrer">hieroglyphs</a>) are copyrighted to their respective owner &copy;&nbsp;<a href="https://github.com/norserium" target="_blank" rel="noopener noreferrer">Norserium</a></p>
<p>That's it. Feel free to leave a comment below.</p>

Enhance your React applications by implementing intuitive mouse drag-and-drop scrolling. This article provides a comprehensive guide on creating reusable React components that enable users to scroll content effortlessly by clicking and dragging. Discover practical examples and best practices to elevate your project's user experience.

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

React component scrolling via Mouse Drag & Drop