<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

<figure class="wp-block-image size-large is-resized"><img src="https://tcmhack.in/wp-content/uploads/2021/05/react-indiana-scroll.gif" alt="" class="wp-image-841" width="472" height="265"/><figcaption>react-indiana-drag-scroll</figcaption></figure>



<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><span class="highlight"><a href="https://github.com/Norserium/react-indiana-drag-scroll" target="_blank" rel="noreferrer noopener">react-indiana-drag-scroll</a></span></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 <a href="https://norserium.github.io/react-indiana-drag-scroll/" target="_blank" rel="noreferrer noopener">demo website</a>  / <a href="https://codesandbox.io/s/react-indiana-drag-scroll-default-iw9xh" target="_blank" rel="noreferrer noopener">sandbox</a></p>



<h2>Install</h2>



<pre class="wp-block-code"><code>npm install --save react-indiana-drag-scroll</code></pre>



<p>or install via yarn</p>



<pre class="wp-block-code"><code>yarn add react-indiana-drag-scroll</code></pre>



<h2>Usage</h2>



<pre class="wp-block-code"><code>import React, { Component } from 'react';
import ScrollContainer from 'react-indiana-drag-scroll';
class Example extends Component {
    render () {
        return (
            &lt;ScrollContainer className="scroll-container">
                { ... }
            &lt;/ScrollContainer>
        )
    }
}</code></pre>



<h2>Component properties</h2>



<figure class="wp-block-table"><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></td></tr><tr><td>onScroll</td><td>Function</td><td>Invoked when user scrolling container</td><td></td></tr><tr><td>onEndScroll</td><td>Function</td><td>Invoked when user ends scrolling container</td><td></td></tr><tr><td>onStartScroll</td><td>Function</td><td>Invoked when user starts scrolling container</td><td></td></tr><tr><td>onClick</td><td>Function</td><td>Invoked when user clicks the scrolling container without dragging</td><td></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></td></tr><tr><td>style</td><td>Number</td><td>The custom styles for the container</td><td></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></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></td></tr><tr><td>nativeMobileScroll</td><td>Bool</td><td>Use native mobile drag scroll for mobile devices</td><td>true</td></tr></tbody></table></figure>



<h2>Static functions</h2>



<figure class="wp-block-table"><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></figure>



<h2>How to set the initial scroll?</h2>



<p>To set initial scroll you need get the ref to the root node of the <code>ScrollContainer</code>. It can be implemented by <a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-innerref-0g8v5?file=/index.js" target="_blank" rel="noreferrer noopener nofollow">using <code>innerRef</code>property</a> or <a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-getelement-99o6q" target="_blank" rel="noreferrer noopener nofollow">the static function <code>getElement</code></a>. At the worst you can use the <a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-finddomnode-dvdop" target="_blank" rel="noreferrer noopener nofollow"><code>ReactDOM.findDOMNode</code></a> method.</p>



<h2>License</h2>



<p>The source code is licensed under MIT, all images (except <a href="https://www.freepik.com/free-vector/ancient-egypt-hieroglyphics-background-with-flat-design_2754100.htm" target="_blank" rel="noreferrer noopener nofollow">hieroglyphs</a>) are copyrighted to their respective owner © <a href="https://github.com/norserium" target="_blank" rel="noreferrer noopener">Norserium</a></p>



<p>That's it. Feel free to leave a comment below.</p>

react-indiana-drag-scroll



In this example we will show how to implement the component scrolling via mouse drag &amp; drop like Google Map, Goo...

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

React component scrolling via Mouse Drag & Drop