react-scroll-ondrag

react-scroll-ondrag

Scroll your elements by dragging your mouse

Live demo

You can see the simplest demo here: Live demo

Install

$ npm install --save react-scroll-ondrag

Examples

Run examples:

$ npm ci $ cd examples $ npm ci $ npm start

Usage

import { useRef } from 'react'; import useScrollOnDrag from 'react-scroll-ondrag'; const App = () => { const ref = useRef(); const { events } = useScrollOnDrag(ref); return <div {...events} ref={ref} />; };

Arguments

ref

Type: a React ref, required

A ref to the DOM element whose scroll position you want to control

options

Type: object

options.runScroll

Type: function: ({ dx: Integer, dy: Integer }) => void Default:

// ref is the first argument to the hook, documented above ({ dx, dy }) => { const maxHorizontalScroll = dom => dom.scrollWidth - dom.clientWidth; const maxVerticalScroll = dom => dom.scrollHeight - dom.clientHeight; const offsetX = Math.min(maxHorizontalScroll(ref.current), ref.current.scrollLeft + dx); ref.current.scrollLeft = offsetX; // eslint-disable-line no-param-reassign const offsetY = Math.min(maxVerticalScroll(ref.current), ref.current.scrollTop + dy); ref.current.scrollTop = offsetY; // eslint-disable-line no-param-reassign }

Used to customize scroll, i.e., scroll only in horizontal direction, change scroll speed, etc

options.onDragStart

Type: function: () => void

Called when scrolling by dragging starts

options.onDragEnd

Type: function: () => void

Called when scrolling by dragging ends

Return value

Type: object, shape: { events: { onMouseDown } }

An object with the events to inject to the controlled element.

License

See the LICENSE file for license rights and limitations (MIT).