Fully Customizable Scrollbar For React - rc-scrollbars

Description:

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} />
    );
  }
}