react-custom-scrollbars-cbx

    4.2.2 • Public • Published

    react-custom-scrollbars

    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

    Installation

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

    Usage

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

    import { Scrollbars } from 'react-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 'react-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

    Examples

    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

    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-cbx

    DownloadsWeekly Downloads

    77

    Version

    4.2.2

    License

    MIT

    Unpacked Size

    350 kB

    Total Files

    33

    Last publish

    Collaborators

    • alex_cbx
    • aaronfuentes
    • mirodriguez11
    • cbx-npm