Draggable Scrollable Library For React

Description:

A React hook that adds draggable functionality to scrollable content.

How to use it:

1. Import and register the hook.

# Yarn
$ yarn add use-draggable-scroll
# NPM
$ npm i use-draggable-scroll --save

import { useDraggableScroll } from 'use-draggable-scroll';

2. Basic usage.

const Component = () => {
  const ref = useRef(null);
  const { onMouseDown } = useDraggableScroll(ref);
  return (
    <div ref={ref} onMouseDown={onMouseDown}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </div>
  );
};

3. Set the drag direction that is allowed: vertical, horizontal or both (default).

const { onMouseDown } = useDraggableScroll(ref, { 
  direction: 'horizontal' 
});

Preview: