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: about 2 months 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 (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-11-27T13:03:07.000Z (almost 2 years ago)
• Last Synced: 2024-05-16T12:42:50.030Z (4 months 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: 493
• Watchers: 5
• Forks: 29
• Open Issues: 7
• 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)

[![NPM](https://img.shields.io/npm/v/react-indiana-drag-scroll.svg)](https://www.npmjs.com/package/react-indiana-drag-scroll)  [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Welcome to journey!

![](https://github.com/norserium/react-indiana-drag-scroll/blob/master/example/demo.gif?raw=true)

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)