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