npm

Need private packages and team management tools?Check out npm Orgs. »

react-scroll-ondrag

1.0.0 • Public • Published

react-scroll-ondrag

Travis npm package Coverage Status Dependency Status devDependency Status

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:

cd examples
$ npm install
$ npm start

Usage

import React, { 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).

install

npm i react-scroll-ondrag

Downloadsweekly downloads

15

version

1.0.0

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability