React Indiana Drag Scroll

Implements scroll on drag

Examples / Documentation / Sandbox

Welcome to journey!

Try it yourself! Go to demo website.

Install

:fire: You're currently looking at the branch for the alpha release. If you're looking for the stable branch, please check out master branch.

npm install --save react-indiana-drag-scroll@next

yarn add react-indiana-drag-scroll@next

Usage

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).

Props

| 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

Configuration

| 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]

License

The source code is licensed under MIT, all images (except hieroglyphs) are copyrighted to their respective owner © Norserium