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

Package detail

flowscrollbar

readme