react-custom-scrollbars
- frictionless native browser scrolling
- native scrollbars for mobile devices
- fully customizable
- auto hide
- auto height
- universal (runs on client & server)
requestAnimationFramefor 60fps- no extra stylesheets
- well tested, 100% code coverage
Installation
npm install react-custom-scrollbars --saveThis 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 startTests
# Make sure that you've installed the dependencies npm install # Run tests npm testCode Coverage
# Run code coverage. Results can be found in `./coverage` npm run test:covLicense
MIT
