Scrollbar Component

A customizable React scrollbar component that supports both vertical and horizontal scrolling with drag functionality.

Installation

You can install this package via npm:

npm i flowscrollbar

Usage

import React from "react";
import Scrollbar from "flowscrollbar";


function App() {
  return (
    <Scrollbar height={300} width={500} onScrollYEnd={() => console.log("Reached Y end!")}>
      <div style={{ width: "800px", height: "600px" }}>
        {/* Your scrollable content here */}
        <p>Scrollable Content...</p>
      </div>
    </Scrollbar>
  );
}

export default App;

Props

| Prop | Type | Description | |-------------------|----------|-------------| | height | number | Sets the height of the scrollbar container. | | width | number | Sets the width of the scrollbar container. | | style | object | Custom styling for the scrollbar track and thumb. | | onScrollYEnd | func | Callback when vertical scrolling reaches the end. | | onScrollXEnd | func | Callback when horizontal scrolling reaches the end. | | beforeEndOffset| number | Offset before triggering onScrollYEnd or onScrollXEnd. | | onScroll | func | Callback triggered on scroll events. |

Features

• Customizable scrollbar appearance
• Drag functionality for scrolling
• Supports both vertical and horizontal scrolling
• Triggers events when reaching scroll limits
• Fully responsive

Contributing

Contributions are welcome! Feel free to submit a pull request or open an issue.

Author

Developed by Akshay Soni