scroll

A lightweight and customizable scrollbars made with react

Dec 19, 2020
A lightweight and customizable scrollbars made with react

rc-scrollbars

React scrollbars component.

A lightweight and customizable scrollbars made with react.

View Demo View Github

  • 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

Installation

npm install rc-scrollbars --save # OR yarn add rc-scrollbars

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

Usage

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

import { Scrollbars } from 'rc-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 'rc-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 yarn install # Move to example directory cd example/ yarn install yarn start

Tests (WIP)

# Make sure that you've installed the dependencies yarn install # Run tests yarn test

Code Coverage (WIP)

# Run code coverage. Results can be found in `./coverage` yarn test:cov

GitHub

Recommended