react-custom-scrollbars-2
    TypeScript icon, indicating that this package has built-in type declarations

    4.4.0 • Public • Published

    react-custom-scrollbars-2

    npm npm version npm downloads

    • 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

    Demos · Documentation

    Quick note

    This repo is due to the original (fantastic) react-custom-scrollbars package going a little stale and we needed a handful of bug fixes which will be managed here.

    Installation

    npm install react-custom-scrollbars-2 --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-2 are only available on npm.

    Usage

    This is the minimal configuration. Check out the Documentation for advanced usage.

    import { Scrollbars } from 'react-custom-scrollbars-2';
    
    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 'react-custom-scrollbars-2';
    
    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

    Examples

    Run the simple example:

    # Make sure that you've installed the dependencies
    npm install
    # Move to example directory
    cd react-custom-scrollbars-2/examples/simple
    npm install
    npm start

    Tests

    # Make sure that you've installed the dependencies
    npm install
    # Run tests
    npm test

    Code Coverage

    # Run code coverage. Results can be found in `./coverage`
    npm run test:cov

    License

    MIT

    Install

    npm i react-custom-scrollbars-2

    DownloadsWeekly Downloads

    8,628

    Version

    4.4.0

    License

    MIT

    Unpacked Size

    195 kB

    Total Files

    32

    Last publish

    Collaborators

    • robpethi