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 |