use-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 use-drag-to-scrol

Usage

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

import React, { useRef } from "react";
import useDragToScroll from "use-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
  const { handleMouseDown, handleMouseMove, handleMouseUp } =
    useDragToScroll(scrollRef);

  return (
    <div
      ref={scrollRef} // Reference to the scrollable div
      onMouseDown={handleMouseDown} // Start scrolling on mouse down
      onMouseMove={handleMouseMove} // Scroll when mouse is moved
      onMouseUp={handleMouseUp} // Stop scrolling on mouse up
      onMouseLeave={handleMouseUp} // Ensure scrolling stops when mouse leaves the 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;