React scrollbars component
npm install react-custom-scrollbars-4![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
This repo is due to both the original react-custom-scrollbars and react-custom-scrollbars-2 packages being stale. Initially to add React 19 support, this fork aims to modernize it in every way, while keeping the original APIs intact.
``bash`
npm install react-custom-scrollbars-4 --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-4 are only available on npm.
This is the minimal configuration. Check out the Documentation for advanced usage.
`javascript
import { Scrollbars } from "react-custom-scrollbars-4";
class App extends Component { Some great content...
render() {
return (
);
}
}
`
The component is completely customizable. Check out the following code:
`javascript
import { Scrollbars } from 'react-custom-scrollbars-4';
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 the simple example:
`bash`Make sure that you've installed the dependencies
npm installMove to example directory
cd react-custom-scrollbars-4/examples/simple
npm install
npm start
`bash`Make sure that you've installed the dependencies
npm installRun tests
npm test
`bash./coverageRun code coverage. Results can be found in
``
npm run test:cov
MIT