rc-scrollbars is a lightweight, customizable scrollbar component for React app.
Features:
- frictionless native browser scrolling
- native scrollbars for mobile devices
- requestAnimationFrame for 60fps
- no extra stylesheets
- IE9+ support
How to use it:
1. Install and import the rc-scrollbars component.
# Yarn $ yarn add rc-scrollbars # NPM $ npm i rc-scrollbars
import { Scrollbars } from 'rc-scrollbars';
2. Create a basic custom scrollbar on your scrollable content.
class App extends Component {
render() {
return (
<Scrollbars style={{ width: 600, height: 400 }}>
<p>Some great content...</p>
</Scrollbars>
);
}
}
3. Customize the scrollbar with the following options.
onScroll?: (e: React.UIEvent<HTMLElement>) => void; onScrollFrame?: (values: ScrollValues) => void; onScrollStart?: () => void; onScrollStop?: () => void; onUpdate?: (values: ScrollValues) => void; renderView: (props: HTMLAttributes<HTMLDivElement>) => JSX.Element; renderTrackHorizontal: (props: HTMLAttributes<HTMLDivElement>) => JSX.Element; renderTrackVertical: (props: HTMLAttributes<HTMLDivElement>) => JSX.Element; renderThumbHorizontal: (props: HTMLAttributes<HTMLDivElement>) => JSX.Element; renderThumbVertical: (props: HTMLAttributes<HTMLDivElement>) => JSX.Element; tagName: string; thumbSize?: number; thumbMinSize: number; hideTracksWhenNotNeeded?: boolean; autoHide: boolean; autoHideTimeout: number; autoHideDuration: number; autoHeight: boolean; autoHeightMin: number | string; autoHeightMax: number | string; universal: boolean; style?: React.CSSProperties;
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} />
);
}
}
Preview:
Download Details:
Author: sakhnyuk
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/sakhnyuk/rc-scrollbars
License: MIT
