react-custom-scrollbars-2
=========================

![npm]()

* 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

``bash
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.

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

class App extends Component {
render() {
return (



Some great content...



);
}
}
`

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

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

class CustomScrollbars extends Component {
render() {
return (
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:
`bash


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

`bash

Make sure that you've installed the dependencies

npm install

Run tests

npm test
`

$3

`bash


Run code coverage. Results can be found in ./coverage


npm run test:cov
``

License

MIT