<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 component scrolling via Mouse Drag & Drop