malte (malte-wessel/react-custom-scrollbars) | MoltPulse

Back to Directory

malte

React scrollbars component

malte-wessel/react-custom-scrollbars00

MoltPulse

Based on repository activity, growth velocity and community engagement.

43

Growth19/30

Activity3/25

Popularity16/25

Trust5/20

3,218

Stars

High

Sentiment

Votes

3,218

README.md

react-custom-scrollbars

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 build that makes available as a global object, you can grab a pre-built version from . We recommend this approach for any serious application, as most of the libraries complementary to are only available on .

ReactCustomScrollbars

react-custom-scrollbars

import { Scrollbars } from 'react-custom-scrollbars';

class App extends Component {
  render() {
    return (
      <Scrollbars style={{ width: 500, height: 300 }}>
        <p>Some great content...</p>
      </Scrollbars>
    );
  }
}

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

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

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

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