react-indiana-drag-scroll
Version:
Implements scroll on drag
81 lines (57 loc) • 5.1 kB
Markdown
# React Indiana Drag Scroll
> Implements scroll on drag
[Examples](https://norserium.github.io/react-indiana-drag-scroll/) / [Sandbox](https://codesandbox.io/s/react-indiana-drag-scroll-default-iw9xh)
[](https://www.npmjs.com/package/react-indiana-drag-scroll) <a href="https://npmcharts.com/compare/react-indiana-drag-scroll?minimal=true"><img src="https://img.shields.io/npm/dm/react-indiana-drag-scroll.svg?sanitize=true" alt="Downloads"></a> [](https://standardjs.com)
## Welcome to journey!
Try it yourself! Go to [demo website](https://norserium.github.io/react-indiana-drag-scroll/).
## Install
```bash
npm install --save react-indiana-drag-scroll
```
```bash
yarn add react-indiana-drag-scroll
```
## Usage
```jsx
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<Number>| 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](https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-innerref-0g8v5?file=/index.js) or [the static function `getElement`](https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-getelement-99o6q). At the worst you can use the [`ReactDOM.findDOMNode`](https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-finddomnode-dvdop) method.
## License
The source code is licensed under MIT, all images (except [hieroglyphs](https://www.freepik.com/free-vector/ancient-egypt-hieroglyphics-background-with-flat-design_2754100.htm)) are copyrighted to their respective owner © [Norserium](https://github.com/norserium)