The package
https://github.com/malte-wessel/react-custom-scrollbars
is no longer maintained, therefore I created this cloned version to cover the needs of my ongoing projects. It adds support for React 17 and React 18. It also adds types for TypeScript directly in the package.
- 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
Sample: https://codesandbox.io/s/replace-custom-scrollbars-l5yuck?file=/src/App.tsx
npm install replace-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.
This is the minimal configuration. Check out the Documentation for advanced usage.
import { Scrollbars } from 'replace-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 'replace-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
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 start# Make sure that you've installed the dependencies
npm install
# Run tests
npm test# Run code coverage. Results can be found in `./coverage`
npm run test:covMIT