README
React Indiana Drag Scroll
Implements scroll on drag
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 innerRef
property 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