InfiniteScroll

A simple infinite scroll component based on react-intersection-observer.

Getting started

Add the dependency.

yarn add @levelsoftware/infinite-scroll

Using InfiniteScroll

InfiniteScroll is a self contained component that lives at the bottom of your list. When the user reaches the component minus the specified offset, the load will trigger if loading is false and hasNextPage is true.

Example

import React from 'react';
import { Book } from '../Book';
import { Loading } from '../Loading';
import { InfiniteScroll } from '../InfiniteScroll';

interface Props {
  books: Book[];
  hasNextPage?: boolean;
  onLoadMore?: () => void;
  loading?: boolean;
}

export const BookList: React.FC<Props> = ({
  books = [],
  hasNextPage,
  onLoadMore,
  loading,
}) => {
  return (
    <div>
      <div>
        {books.map(book => (
          <Book key={book.id} book={book} />
        ))}
      <div>
      <InfiniteScroll
        hasNextPage={hasNextPage}
        onLoadMore={onLoadMore}
        loading={loading}
      />
      {loading && <Loading />}
    </div>
  );
};

Props

Prop	Type	Default	Description
onLoadMore?	() => void	--	Function to run when threshold is met and conditions are prime
loading?	boolean	--	Whether data is currently loading
hasNextPage?	boolean	--	Whether the query has more to load
offset?	number	1000	Number of pixels to offset by for detecting bottom of the list