@alexcambose/react-infinite-scroll v1.0.1

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

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