Implements scroll on drag
Examples / Documentation / Sandbox
Try it yourself! Go to demo website.
🔥 You're currently looking at the branch for the alpha release. If you're looking for the stable branch, please check out
masterbranch.
npm install --save react-indiana-drag-scroll@nextyarn add react-indiana-drag-scroll@next
You can use the ScrollContainer component:
import React, { Component } from 'react'
import { ScrollContainer } from 'react-indiana-drag-scroll';
import 'react-indiana-drag-scroll/dist/style.css'
export const Example = () => {
return (
<ScrollContainer>
{/* scrollable content */}
</ScrollContainer>
)
};Or, if you need to get more flexibility you can use useScrollContainer hook:
import { useScrollContainer } from 'react-indiana-drag-scroll';
export const Example = () => {
const scrollContainer = useScrollContainer(options);
return (
<div ref={scrollContainer.ref}>
{/* scrollable content */}
</div>
)
};In this case you should provide the corresponding styles by yourself (for example, overflow: auto).
| Prop | Type | Description | Default |
|---|---|---|---|
| hideScrollbars | boolean |
Hide the scrollbars | true |
| children | ReactNode |
The content of the scrolling container | |
| onScroll | () => void |
Invoked when user scrolls the container | |
| onEndScroll | () => void |
Invoked when scrolling is over completely | |
| onStartScroll | () => void |
Invoked when scrolling starts | |
| component | ElementType |
The component used for the root node. | 'div' |
| className | string |
The custom classname for the container | |
| style | CSSProperties |
The custom styles for the container | |
| ref | ElementType |
The ref to the root node (experimental alternative to getElement) |
|
| mouseScroll |
Configuration, boolean
|
The configuration of mouse scroll. The object's fields is described below | true |
| Field | Type | Description | Default |
|---|---|---|---|
| rubberBand | boolean |
The flag that indicates that rubber band effect should be enabled | true |
| inertia | boolean |
The flag that indicates that inertial effect should be enabled | true |
| overscroll | boolean |
The flag that indicates that overscroll effect should be enabled (experimental) | false |
| cursor | boolean |
The flag that indicates that cursor should be changed on drag | true |
| activationDistance | Number | The distance that distinguish click and drag start | 10 |
| ignoreElements | string |
Selector for elements that should not trigger the scrolling behaviour (for example, ".modal, dialog" or "*[prevent-drag-scroll]") |
|
| buttons | number[] |
The list of mouse button numbers that will activate the scroll by drag | [1] |
The source code is licensed under MIT, all images (except hieroglyphs) are copyrighted to their respective owner © Norserium