react-custom-scrollbars-2

What is react-custom-scrollbars-2?

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

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

Custom Scrollbar Styling

This feature allows you to customize the appearance of the scrollbar. In the example, the vertical scrollbar thumb is styled with a blue background color.

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

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

Custom Scrollbar Behavior

This feature allows you to customize the behavior of the scrollbar. In the example, an onScrollFrame event is used to log the scroll values whenever the scrollbar is moved.

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

function CustomScrollbarBehavior() {
  return (
    <Scrollbars
      style={{ width: 500, height: 300 }}
      onScrollFrame={values => console.log(values)}
    >
      <div>Your content here</div>
    </Scrollbars>
  );
}

Auto-Hide Scrollbars

This feature allows the scrollbars to automatically hide when not in use, providing a cleaner look. The example demonstrates how to enable auto-hide with a timeout and duration.

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

function AutoHideScrollbar() {
  return (
    <Scrollbars
      style={{ width: 500, height: 300 }}
      autoHide
      autoHideTimeout={1000}
      autoHideDuration={200}
    >
      <div>Your content here</div>
    </Scrollbars>
  );
}

Other packages similar to react-custom-scrollbars-2

react-scrollbars-custom

react-scrollbars-custom is a highly customizable scrollbar component for React. It offers more advanced features like smooth scrolling, custom track and thumb elements, and better performance with large datasets. Compared to react-custom-scrollbars-2, it provides more flexibility and options for customization.

simplebar-react

simplebar-react is a React wrapper for SimpleBar, a custom scrollbar library. It provides a simple and lightweight solution for custom scrollbars with minimal configuration. While it may not offer as many customization options as react-custom-scrollbars-2, it is easier to set up and use for basic needs.

react-perfect-scrollbar

react-perfect-scrollbar is a React wrapper for Perfect Scrollbar, a library that provides custom scrollbars with consistent appearance across different browsers. It is known for its simplicity and ease of use, making it a good alternative to react-custom-scrollbars-2 for developers looking for a straightforward solution.

README

react-custom-scrollbars-2

• 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

Quick note

This repo is due to the original (fantastic) react-custom-scrollbars package going a little stale and we needed a handful of bug fixes which will be managed here.

Installation

npm install react-custom-scrollbars-2 --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-2 are only available on npm.

Usage

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

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

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-2';

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-2/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