react-custom-scrollbars

What is react-custom-scrollbars?

The react-custom-scrollbars package provides a customizable scrollbar component for React applications. It allows developers to create scrollbars with custom styles and behaviors, enhancing the user experience by providing more control over the appearance and functionality of scrollable areas.

What are react-custom-scrollbars's main functionalities?

Custom Scrollbars

This feature allows you to create a custom scrollbar for a scrollable area. You can specify the dimensions and style of the scrollbar.

import { Scrollbars } from 'react-custom-scrollbars';

function CustomScrollbar() {
  return (
    <Scrollbars style={{ width: 500, height: 300 }}>
      <div>Your content here</div>
    </Scrollbars>
  );
}

Custom Thumb Renderer

This feature allows you to customize the appearance of the scrollbar thumb. You can provide a custom renderer for the thumb component.

import { Scrollbars } from 'react-custom-scrollbars';

function CustomThumb({ style, ...props }) {
  const thumbStyle = {
    backgroundColor: 'blue',
    borderRadius: '4px'
  };
  return <div style={{ ...style, ...thumbStyle }} {...props} />;
}

function CustomScrollbar() {
  return (
    <Scrollbars renderThumbVertical={props => <CustomThumb {...props} />} style={{ width: 500, height: 300 }}>
      <div>Your content here</div>
    </Scrollbars>
  );
}

Custom Track Renderer

This feature allows you to customize the appearance of the scrollbar track. You can provide a custom renderer for the track component.

import { Scrollbars } from 'react-custom-scrollbars';

function CustomTrack({ style, ...props }) {
  const trackStyle = {
    backgroundColor: 'lightgray',
    borderRadius: '4px'
  };
  return <div style={{ ...style, ...trackStyle }} {...props} />;
}

function CustomScrollbar() {
  return (
    <Scrollbars renderTrackVertical={props => <CustomTrack {...props} />} style={{ width: 500, height: 300 }}>
      <div>Your content here</div>
    </Scrollbars>
  );
}

Custom View Renderer

This feature allows you to customize the appearance of the scrollable view. You can provide a custom renderer for the view component.

import { Scrollbars } from 'react-custom-scrollbars';

function CustomView({ style, ...props }) {
  const viewStyle = {
    padding: '10px'
  };
  return <div style={{ ...style, ...viewStyle }} {...props} />;
}

function CustomScrollbar() {
  return (
    <Scrollbars renderView={props => <CustomView {...props} />} style={{ width: 500, height: 300 }}>
      <div>Your content here</div>
    </Scrollbars>
  );
}

Other packages similar to react-custom-scrollbars

react-scrollbars-custom

react-scrollbars-custom is a highly customizable scrollbar component for React. It offers more flexibility and customization options compared to react-custom-scrollbars, including support for horizontal and vertical scrollbars, custom thumb and track components, and more.

react-perfect-scrollbar

react-perfect-scrollbar is a React wrapper for the Perfect Scrollbar library. It provides a simple and easy-to-use interface for adding custom scrollbars to your React applications. It is less customizable than react-custom-scrollbars but offers a straightforward solution for adding custom scrollbars.

react-scrollbar

react-scrollbar is another customizable scrollbar component for React. It provides basic customization options for the scrollbar's appearance and behavior. It is simpler and less feature-rich compared to react-custom-scrollbars but can be a good choice for basic use cases.

README

react-custom-scrollbars

• 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

Demos · Documentation

Installation

npm install react-custom-scrollbars --save

This assumes that you’re using npm package manager with a module bundler like Webpack or Browserify to consume CommonJS modules.

If you don’t yet use npm or a modern module bundler, and would rather prefer a single-file UMD build that makes ReactCustomScrollbars available as a global object, you can grab a pre-built version from unpkg. We don’t recommend this approach for any serious application, as most of the libraries complementary to react-custom-scrollbars are only available on npm.

Usage

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

import { Scrollbars } from 'react-custom-scrollbars';

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

The <Scrollbars> component is completely customizable. Check out the following code:

import { Scrollbars } from 'react-custom-scrollbars';

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

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 react-custom-scrollbars/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

License

MIT