react-drag-to-scroll

A simple React hook to add drag-to-scroll functionality to a container.

Installation

To install this package, run the following command in your project:

npm install react-drag-to-scroll

Usage

Here's an example of how to use the useDragToScroll hook in your React component:

import React, { useRef } from "react";
import useDragToScroll from "react-drag-to-scroll";

const Example = () => {
  // Create a reference to the scrollable container
  const scrollRef = useRef(null);

  // Use the hook to get the event handlers for mouse actions

  useDragToScroll(scrollRef);

  return (
    <div
      ref={scrollRef} // Reference to the scrollable div
      style={{
        width: "500px",
        height: "300px",
        overflow: "scroll", // Ensure the container is scrollable
        border: "1px solid black",
      }}
    >
      <div style={{ width: "1500px", height: "1000px" }}>
        {/* Your scrollable content goes here */}
        Drag inside this box to scroll
      </div>
    </div>
  );
};

export default Example;