react-scroll-view

A scroll view React component optimized for large numbers of items.

Installation

JavaScript

First,

npm install @planet/react-scroll-view

Then in your code you can

var ScrollView = require('@planet/react-scroll-view')

css

Both a .less and a compiled .css file are provided with the module.

Usage

var itemHeight = 50;
var itemStyle = {
  height: itemHeight
}
<ScrollView
    itemCount={50}
    itemHeight={itemHeight}
    itemAtPosition={function(position) {
      return (
        <div className="my-item" style={itemStyle}>I am number {position}</div>
      )
    }}/>

The supported properties are:

• itemCount : Required. the number of items in the scroll view
• itemHeight: Required. the height of each item. All items must have the same height.
• itemAtPosition : Required. a function that, when invoked, will return the jsx representing the item at the specified position
• itemPreloadCount : how many items are loaded outside the visible area of the scroll view. Defaults to 10
• nativeScrollbar : a boolean value. if set to true, the native scrollbar will be used instead of the custom one. Defaults to false.
• onScroll: optional callback that will be invoked on every scroll event.