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';importuseScrollOnDragfrom'react-scroll-ondrag';constApp=()=>{constref=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 })=>{constmaxHorizontalScroll=dom=>dom.scrollWidth-dom.clientWidth;constmaxVerticalScroll=dom=>dom.scrollHeight-dom.clientHeight;constoffsetX=Math.min(maxHorizontalScroll(ref.current),ref.current.scrollLeft+dx);ref.current.scrollLeft=offsetX;// eslint-disable-line no-param-reassignconstoffsetY=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).