Table of Content

• Table of Content
• Install
• Usage
  • Use the window object as the global scroller
  • Use the specific dom element as local scroller
• API
  • InfiniteScroll
• Build and Test

Install

The only component exposed to external is InfiniteScroll. And use install script like below:

npm install --save @sevenryze/infinite-scroll

Usage

Use the window object as the global scroller

<InfiniteScroll
  appendMore={this.getMoreCards}
  prefixMore={this.refresh}
  isOnAppendLoading={this.state.isOnAppendLoading}
  isOnPrefixLoading={this.state.isOnPrefixLoading}
  isCloseAppendMore={this.state.isNoMore}
  appendMoreThreshold={20}
  pullingEnsureThreshold={80}
>
  {this.state.cardList.map(this.renderItem)}
</InfiniteScroll>

Use the specific dom element as local scroller

TODO for implement.

API

This lib exposes only one public class: InfiniteScroll.

InfiniteScroll

<InfiniteScroll
  appendMore={this.getMoreCards}
  prefixMore={this.refresh}
  isOnAppendLoading={this.state.isOnAppendLoading}
  isOnPrefixLoading={this.state.isOnPrefixLoading}
  isCloseAppendMore={this.state.isNoMore}
  appendMoreThreshold={20}
  pullingEnsureThreshold={80}
>

• appendMore: () => void: The scroller will invoke this method when scrolled cross the threshold.
• prefixMore: () => void: The same usage as loadMore but to prefix items to list.
• isOnAppendLoading: boolean: Indicate whether on append loading.
• isOnPrefixLoading: boolean: The same as append.
• isCloseAppendMore: boolean: Useful to close the load call when there is no more item to load.
• appendMoreThreshold: number: The threshold to the bottom of rendered list.
• pullingEnsureThreshold: number: The threshold pulling to refresh.

Build and Test

Build? you shall use this one and forget other hand-tired works.