@sevenryze/infinite-scroll

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

Usage no npm install needed!

<script type="module">
  import sevenryzeInfiniteScroll from 'https://cdn.skypack.dev/@sevenryze/infinite-scroll';
</script>

README

Table of Content

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.

Maintainer

Seven Ryze