Awesome Open Source
Awesome Open Source

react-custom-scrollbars

npm npm version npm downloads

  • 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

Alternatives To React Custom Scrollbars
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,157,171
Reactjs (175,288
Code Coverage (9,319
Scrolling (3,656
Bundler (3,619
Scrollbar (732
Module Bundler (217