@shakirul/scrollbars

A custom scrollbars component for React, based on react-custom-scrollbars by Malte Wessel.

This fork adds support for React 17, 18, and 19, and includes TypeScript type definitions directly in the package.

Features

• Frictionless native browser scrolling
• Native scrollbars for mobile devices
• Fully customizable
• Auto hide
• Auto height
• Universal (runs on client & server)
• requestAnimationFrame for 60fps
• No extra stylesheets
• Well tested, 100% code coverage

Installation

npm install @shakirul/scrollbars --save

Or with yarn:

yarn add @shakirul/scrollbars

Usage

This is the minimal configuration. Check out the Documentation for advanced usage.

import { Scrollbars } from "@shakirul/scrollbars";

function App() {
  return (
    <Scrollbars style={{ width: 500, height: 300 }}>
      <p>Some great content...</p>
    </Scrollbars>
  );
}

The <Scrollbars> component is completely customizable:

import { Scrollbars } from "@shakirul/scrollbars";

function CustomScrollbars({ children, ...props }) {
  return (
    <Scrollbars
      onScroll={handleScroll}
      onScrollFrame={handleScrollFrame}
      onScrollStart={handleScrollStart}
      onScrollStop={handleScrollStop}
      onUpdate={handleUpdate}
      renderView={renderView}
      renderTrackHorizontal={renderTrackHorizontal}
      renderTrackVertical={renderTrackVertical}
      renderThumbHorizontal={renderThumbHorizontal}
      renderThumbVertical={renderThumbVertical}
      autoHide
      autoHideTimeout={1000}
      autoHideDuration={200}
      autoHeight
      autoHeightMin={0}
      autoHeightMax={200}
      thumbMinSize={30}
      universal={true}
      {...props}
    >
      {children}
    </Scrollbars>
  );
}

All properties are documented in the API docs.

Examples

Run the simple example:

# Make sure that you've installed the dependencies
npm install
# Move to example directory
cd examples/simple
npm install
npm start

Tests

# Make sure that you've installed the dependencies
npm install
# Run tests
npm test

Code Coverage

# Run code coverage. Results can be found in `./coverage`
npm run test:cov

Documentation

• API
• Customization
• Usage

License

MIT