# react-indiana-drag-scroll > Implements scroll on drag Latest version **2.2.1** (published 2025-03-01) · MIT license · 0 weekly downloads ## Install ```sh npm install react-indiana-drag-scroll pnpm add react-indiana-drag-scroll yarn add react-indiana-drag-scroll bun add react-indiana-drag-scroll ``` ## Health **Score 40/100 (D)** — status: maintenance-mode. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 2.2.1 | | Published | 2025-03-01 | | First published | 2018-11-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=8 | | Dependencies | 3 | | Unpacked size | 101.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 529 | | Author | Norserium | | Maintainers | norserium | | Keywords | react, drag, scroll, library, lightweight, scrolling, dragandscroll | ## Links - npm: https://www.npmjs.com/package/react-indiana-drag-scroll - Repository: https://github.com/norserium/react-indiana-drag-scroll - Homepage: https://github.com/norserium/react-indiana-drag-scroll#readme - Issues: https://github.com/norserium/react-indiana-drag-scroll/issues - npm.io page: https://npm.io/package/react-indiana-drag-scroll ## Dependencies (3) - [debounce](https://npm.io/package/debounce.md) ^1.2.0 - [easy-bem](https://npm.io/package/easy-bem.md) ^1.1.1 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.2.1 (latest) — 2025-03-01 - 3.0.4-alpha (next) — 2025-03-01 - 3.0.3-alpha — 2022-11-27 - 3.0.2-alpha — 2022-11-25 - 3.0.1-alpha — 2022-10-25 - 3.0.0-alpha — 2022-09-26 - 2.2.0 — 2022-06-15 - 2.1.0 — 2021-10-09 - 2.0.1 — 2021-03-04 - 2.0.0 — 2021-02-28 - 1.8.1 — 2021-02-26 - 1.8.0 — 2020-11-02 - 1.7.2 — 2020-10-18 - 1.7.1 — 2020-10-18 - 1.7.0 — 2020-09-25 - … 25 more at https://npm.io/package/react-indiana-drag-scroll/versions ## 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) Downloads [![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) --- _Source: https://npm.io/package/react-indiana-drag-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._