A React Hook To Create Drag-gable And Scroll-able Content

Category: React React Others | October 12, 2021
Author: g-delmo
Official Page: Go to website
Last Update: October 12, 2021
License: MIT


A React hook that allows you to create a drag-gable and scroll-able content functionality in your project very easily by just adding few lines of code.

How can I use it?

  1. First, install the component using NPM.
npm install use-draggable-scroll

2. Or you can install it via Yarn.

yarn add use-draggable-scroll

3. Then, import the hook.

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

4. Now, write the code to make it functional.

const Component = () => {
  const ref = useRef(null);

  const { onMouseDown } = useDraggableScroll(ref);

  return (
    <div ref={ref} onMouseDown={onMouseDown}>
      <div>child 1</div>
      <div>child 2</div>
      <div>child 3</div>

Supported optional parameters:

Here is the some drag directions, you can set.

  • vertical
  • horizontal
  • both (This is default option)
const { onMouseDown } = useDraggableScroll(ref, { direction: 'vertical' });