Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/norserium/react-indiana-drag-scroll
React component which implements scrolling via holding the mouse button or touch
https://github.com/norserium/react-indiana-drag-scroll
drag dragandscroll library lightweight react scroll scroller scrolling
Last synced: 3 days ago
JSON representation
React component which implements scrolling via holding the mouse button or touch
- Host: GitHub
- URL: https://github.com/norserium/react-indiana-drag-scroll
- Owner: Norserium
- License: other
- Created: 2018-11-06T00:29:14.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-11-27T13:03:07.000Z (about 2 years ago)
- Last Synced: 2025-01-16T01:15:05.692Z (5 days ago)
- Topics: drag, dragandscroll, library, lightweight, react, scroll, scroller, scrolling
- Language: TypeScript
- Homepage: https://norserium.github.io/react-indiana-drag-scroll/
- Size: 3.2 MB
- Stars: 509
- Watchers: 5
- Forks: 31
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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) 
[](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 (
{ ... }
)
}
}
```
## 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](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)