Cm-react-indiana-drag-scroll NPM

React Indiana Drag Scroll

Implements scroll on drag

Welcome to journey!

npm.io

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

react drag scroll library lightweight scrolling dragandscroll

3.0.3-alpha

1 year ago