React component scrolling via Mouse Drag & Drop

TIKAM CHAND
TIKAM CHAND

28 May 2021

JavaScriptLibrariesReact

In this example we will show how to implement the component scrolling via mouse drag & drop like Google Map, Google Earth, Figma etc.

To implement the scrolling we will use the react-indiana-drag-scroll library which is great library to Implement scroll on drag.

So let's get started.

Demo

Try it yourself! Go to demo website / sandbox

Install

npm install --save react-indiana-drag-scroll

or install via yarn

yarn add react-indiana-drag-scroll

Usage

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

Component properties

PropTypeDescriptionDefault
verticalBoolAllow vertical drag scrollingtrue
horizontalBoolAllow horizontal drag scrollingtrue
hideScrollbarsBoolHide the scrollbarstrue
activationDistanceNumberThe distance that distinguish click and drag start10
childrenNodeThe content of scrolling container 
onScrollFunctionInvoked when user scrolling container 
onEndScrollFunctionInvoked when user ends scrolling container 
onStartScrollFunctionInvoked when user starts scrolling container 
onClickFunctionInvoked when user clicks the scrolling container without dragging 
componentStringThe component used for the root node.'div'
classNameStringThe custom classname for the container 
draggingClassNameStringThe classname for the container during dragging 
styleNumberThe custom styles for the container 
innerRefElementTypeThe ref to the root node (experimental alternative to getElement) 
ignoreElementsStringSelector for elements that should not trigger the scrolling behaviour (for example, ".modal, dialog" or "*[prevent-drag-scroll]") 
nativeMobileScrollBoolUse native mobile drag scroll for mobile devicestrue
buttonsArrayThe list of mouse button numbers that will activate the scroll by drag[0]

Static functions

NameReturnsDescription
getElementHTMLElementReturns the HTML element

How to set the initial scroll?

To set initial scroll you need get the ref to the root node of the ScrollContainer. It can be implemented by using innerRefproperty or the static function getElement. At the worst you can use the ReactDOM.findDOMNode method.

License

The source code is licensed under MIT, all images (except hieroglyphs) are copyrighted to their respective owner © Norserium

That's it. Feel free to leave a comment below.



Recent posts

TIKAM CHAND
Shadow DOM in JavaScript
How ToJavaScript
463
33