React scrollbars component
npm install rc-scrollbarsrc-scrollbars
=========================
rejuvenated project of react-custom-scrollbars
* 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
bash
npm install rc-scrollbars --saveOR
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.
javascript
import { Scrollbars } from 'rc-scrollbars';class App extends Component {
render() {
return (
Some great content...
);
}
}
`The
component is completely customizable. Check out the following code:`javascript
import { Scrollbars } from 'rc-scrollbars';class CustomScrollbars extends Component {
render() {
return (
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
Run project locally
Run the simple example:
bash
Make sure that you've installed the dependencies
yarn
Run tsc of Scrollbars in watch mode and the documentation project in dev env
yarn dev
``MIT