@alexcambose/react-infinite-scroll

react-infinite-scroll

Another react infinite scroll package

Demo and more docs

Installation

npm package

npm i -S @alexcambose/react-infinite-scroll

const InfiniteScroll = require('@alexcambose/react-infinite-scroll');
// or
import InfiniteScroll from '@alexcambose/react-infinite-scroll';

Usage

Basic example

class Basic extends Component {
  state = {
    items: [],
    skip: 0,
    perLoad: 10,
    hasMore: true,
  };

  loadMore = () => {
    const { items, skip, perLoad } = this.state;
    fetch(
      `https://jsonplaceholder.typicode.com/posts?_start=${skip}&_limit=${perLoad}`
    )
      .then(res => res.json())
      .then(res => {
        this.setState({
          items: [...items, ...res],
          skip: skip + perLoad,
          hasMore: res.length >= perLoad,
        });
      });
  };

  render() {
    const { items, hasMore } = this.state;
    return (
      <InifiniteScroll hasMore={hasMore} loadMore={this.loadMore}>
        {items.map((e, i) => (
          <div key={i}>{e.title}</div>
        ))}
      </InifiniteScroll>
    );
  }
}

Props

Property Name	isRequired	default	type	Description
loadMore	true	-	func	A function that will be called after reaching the bottom. It should fetch data and append it to the current data object. Eg: [1,2,3] -> [1,2,3,4,5]. It receives in the first parameter a function that can be called after the fetching is done to check again if the user scroll is below the last piece of content to call the loadMore function again. Eg: loadMore = callback => get('url').then(() => callback())
initialLoad	false	true	bool	If true it will call loadMore at the beginning, when componentDidMount.
isLoading	false	false	bool	Toggles the loading animation
loading	false	"Loading..."	node	Loading animation. Can be any valid react element.
hasMore	true	-	bool	If there are no more items(skip + limt >= totalCount) this prop should change to false so loadMore is not called again and the `
noMore	false	"No more items."	node	No more message. Can be any valid react element.
auto	false	{}	object	Enabled auto mode. See description here.
throttle	false	100	number	How many number of milliseconds need to pass so that the scroll handler will be executed once
scrollableElement	false	window	instanceof HTMLElement	The HTML Element that will be used to get and calculate the scroll position.
getScrollTop	false	scrollableElement.scrollY	function	Overrides the default method of getting the element scroll top position. The single parameter is represented by the scrollableElement.
getElementHeight	false	scrollableElement.offsetHeight	function	Overrides the default method of getting the element height. The single parameter is represented by the scrollableElement

Auto mode

Auto mode is a feature that lets you create infinite scrolling lists without worrying about handling skip or checking if there are items left to fetch.

Basic example

class Basic extends Component {
  state = {
    items: [],
  };

  loadMore = (skip, perLoad) =>
    fetch(
      `https://jsonplaceholder.typicode.com/posts?_start=${skip}&_limit=${perLoad}`
    ).then(res => res.json());

  render() {
    const { items } = this.state;
    return (
      <InifiniteScroll
        auto={{
          loadMore: this.loadMore,
          perLoad: 10,
          onLoadMore: newItems =>
            this.setState({ items: [...items, ...newItems] }),
        }}
      >
        {items.map((e, i) => (
          <div key={i}>{e.title}</div>
        ))}
      </InifiniteScroll>
    );
  }
}

Props for auto mode

Property Name	isRequired	default	type	Description
loadMore	true	-	func	Function that will be called to fetch items. Takes two arguments: skip and perLoad. Must return a promise.
onLoadMore	true	-	func	Callback that will be called when loadMore is resolved. Take as an arguments the result from the loadMore.
perLoad	true	-	number	How many items to load at once. Will also be passed as an arguments to loadMore
useCount	false	false	bool	If it's set to true, infinite scroll will calculate if it has more items based on the total number of items.
count	false	-	func	The function that will be called to get the number of all items. Must return a number. If useCount is set to true and count prop is not specified it will use loadMore with the skip and perLoad set to 0.
onCount	false	-	func	Called after count is resolved. Takes as an argument the items.
onCountError	false	-	func	Called if count is rejected. Takes as an argument the promise error.
onLoadMoreError	false	-	func	Called if loadMore is rejected. Takes as an argument the promise error.
initialSkip	false	0	number	How many items to skip at the first load.