react-custom-scrollbars
React scrollbars component
Last updated 3 years ago by malte-wessel .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-custom-scrollbars 
SYNC missed versions from official npm registry.

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

Current Tags

  • 4.2.1                                ...           latest (3 years ago)

40 Versions

  • 4.2.1                                ...           3 years ago
  • 4.2.0                                ...           3 years ago
  • 4.1.2                                ...           3 years ago
  • 4.1.1                                ...           3 years ago
  • 4.1.0                                ...           3 years ago
  • 4.0.2                                ...           3 years ago
  • 4.0.1                                ...           4 years ago
  • 4.0.0                                ...           4 years ago
  • 4.0.0-beta.2                                ...           4 years ago
  • 4.0.0-beta.1                                ...           4 years ago
  • 3.1.0                                ...           4 years ago
  • 3.0.1                                ...           4 years ago
  • 3.0.0                                ...           4 years ago
  • 3.0.0-beta                                ...           4 years ago
  • 2.3.0                                ...           4 years ago
  • 2.2.2                                ...           4 years ago
  • 2.2.1                                ...           4 years ago
  • 2.2.0                                ...           4 years ago
  • 2.1.2                                ...           4 years ago
  • 2.1.1                                ...           4 years ago
  • 2.1.0                                ...           4 years ago
  • 2.0.1                                ...           5 years ago
  • 2.0.0                                ...           5 years ago
  • 2.0.0-beta                                ...           5 years ago
  • 1.1.0                                ...           5 years ago
  • 1.0.2                                ...           5 years ago
  • 1.0.1                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
  • 1.0.0-rc2                                ...           5 years ago
  • 1.0.0-rc1                                ...           5 years ago
  • 0.1.9                                ...           5 years ago
  • 0.1.8                                ...           5 years ago
  • 0.1.7                                ...           5 years ago
  • 0.1.6                                ...           5 years ago
  • 0.1.5                                ...           5 years ago
  • 0.1.4                                ...           5 years ago
  • 0.1.3                                ...           5 years ago
  • 0.1.2                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 3
This Week 3
This Month 2,822
Last Day 60
Last Week 1,788
Last Month 6,876
Dependencies (3)
Dev Dependencies (34)
Dependents (510)

Copyright 2014 - 2016 © taobao.org |