/react-infinite-scroll

Another react infinite scroll package

Primary LanguageJavaScriptMIT LicenseMIT

react-infinite-scroll

Build Status

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.