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 scrollbars made of 100% react goodness
native scrolling for mobile devices
no dependencies
no extra stylesheets
fully customizable
IE9+ support
react@0.14.0-rc1
check out the demo

Installation
Usage
Customization
API
Examples
License

Installation

npm install react-custom-scrollbars --save

Usage

class App extends Component {
  render() {
    return (
      <Scrollbars style={{ width: 500, height: 300 }}>
        <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>
    );
  }
}

Don't forget to set the viewport meta tag, if you want to support mobile devices

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

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 (
      <CustomScrollbars style={{ width: 500, height: 300 }}>
        <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>
    );
  }
}

API

`<Scrollbars>`

Props

The following properties expect a react element to be returned. You can customize the element to your needs.

scrollbarHorizontal: (Function) Horizontal scrollbar element
scrollbarVertical: (Function) Vertical scrollbar element
thumbHorizontal: (Function) Horizontal thumb element
thumbVertical: (Function) Vertical thumb element
view: (Function) The element your content will be rendered in

Don't forget to pass the received props to your custom element. Example:

class CustomScrollbars extends Component {
  render() {
    return (
      <Scrollbars
        // Set a custom className
        scrollbarHorizontal={props => <div {...props} className="scrollbar-vertical"/>}
        // Customize inline styles
        scrollbarVertical={({ style, ...props}) => {
          return <div style={{...style, padding: 20}} {...props}/>;
        }}>
        {this.props.children}
      </Scrollbars>
    );
  }
}

Examples

Run the simple example:

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

License

MIT