Package Exports

react-custom-scrollbars
react-custom-scrollbars/lib/utils/getScrollbarWidth

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-custom-scrollbars) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-custom-scrollbars

lightweight react scrollbars
inspired by noeldelgado's great gemini-scrollbar
native scrolling for mobile devices
fully customizable
IE9+ support
^react@0.14.0-beta3

Installation

npm install react-custom-scrollbars --save

Usage

class App extends Component {
  render() {
    return (
      <div style={{ width: 500, height: 300 }}>
        <Scrollbars>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <p>Lorem ipsum dolor sit amet, ...</p>
        </Scrollbars>
      </div>
    );
  }
}

Customization

class CustomScrollbars extends Component {
  render() {
    return (
      <Scrollbars
        className="container"
        scrollbarHorizontal={props => <div {...props} className="scrollbar-horizontal" />}
        scrollbarVertical={props => <div {...props} className="scrollbar-vertical"/>}
        thumbHorizontal={props => <div {...props} className="thumb-horizontal"/>}
        thumbVertical={props => <div {...props} className="thumb-vertical"/>}
        view={props => <div {...props} className="view"/>}
      >
        {this.props.children}
      </Scrollbars>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div style={{ width: 500, height: 300 }}>
        <CustomScrollbars>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <p>Lorem ipsum dolor sit amet, ...</p>
        </CustomScrollbars>
      </div>
    );
  }
}

Examples

Run the simple example:

cd react-custom-scrollbars/examples/simple
npm install
npm start