react-indiana-drag-scroll

Implements scroll on drag

Usage no npm install needed!

<script type="module">
  import reactIndianaDragScroll from 'https://cdn.skypack.dev/react-indiana-drag-scroll';
</script>

README

React Indiana Drag Scroll

Implements scroll on drag

Examples / Sandbox

NPM JavaScript Style Guide

Welcome to journey!

Try it yourself! Go to demo website.

Install

npm install --save react-indiana-drag-scroll
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

Prop Type Description Default
vertical Bool Allow vertical drag scrolling true
horizontal Bool Allow horizontal drag scrolling true
hideScrollbars Bool Hide the scrollbars true
activationDistance Number The distance that distinguish click and drag start 10
children Node The content of scrolling container
onScroll Function Invoked when user scrolling container
onEndScroll Function Invoked when user ends scrolling container
onStartScroll Function Invoked when user starts scrolling container
onClick Function Invoked when user clicks the scrolling container without dragging
component String The component used for the root node. 'div'
className String The custom classname for the container
draggingClassName String The classname for the container during dragging
style Number The custom styles for the container
innerRef ElementType The ref to the root node (experimental alternative to getElement)
ignoreElements String Selector for elements that should not trigger the scrolling behaviour (for example, ".modal, dialog" or "*[prevent-drag-scroll]")
nativeMobileScroll Bool Use native mobile drag scroll for mobile devices true
buttons Array The list of mouse button numbers that will activate the scroll by drag [0]

Static functions

Name Returns Description
getElement HTMLElement Returns the HTML element

FAQ

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