React Infinite Scroll Loading

Infinite scroll component for React.

Installation and Usage

$ npm i react-infinite-scroll-loading -S
# or
$ yarn add react-infinite-scroll-loading

// for commonjs
const InfiniteScrollLoading = require('react-infinite-scroll-loading');

// for es modules
import InfiniteScrollLoading from 'react-infinite-scroll-loading';

Getting Started

Window scroll events

<InfiniteScrollLoading
  pageStart={1}
  hasMore={hasMore && !isLoading}
  loadMore={loadMore}
  resetPage={resetPage}
>
  {
    !!items.length
    && items.map(item => <li key={item.id}>{item.name}</li>)
  }
  {isLoading && <div>Loading...</div>}
</InfiniteScrollLoading>

DOM scroll events

import styled from '@emotion/styled';

const Wrapper = styled('div')`
  height: 660px;
  overflow: auto;
`;

<Wrapper>
  <InfiniteScrollLoading
    pageStart={1}
    hasMore={hasMore && !isLoading}
    loadMore={loadMore}
    resetPage={resetPage}
    useWindow={false}
  >
    {
      !!items.length
      && items.map(item => <li key={item.id}>{item.name}</li>)
    }
    {isLoading && <div>Loading...</div>}
  </InfiniteScrollLoading>
</Wrapper>

Custom parent element

import styled from '@emotion/styled';

const Wrapper = styled('div')`
  height: 660px;
  overflow: auto;
`;

const wrapperRef = useRef();

<Wrapper ref={wrapperRef}>
  <article>
    <InfiniteScrollLoading
      pageStart={1}
      hasMore={hasMore && !isLoading}
      loadMore={loadMore}
      resetPage={resetPage}
      useWindow={false}
      getScrollParent={() => wrapperRef}
    >
      {
        !!items.length
        && items.map(item => <li key={item.id}>{item.name}</li>)
      }
      {isLoading && <div>Loading...</div>}
    </InfiniteScrollLoading>
  </article>

  <aside>...</aside>
</Wrapper>

API

| Name | Type | Default | Description | |-------------------|---------------------------------|---------|------------------------------------------------------------------------------------------------------------------| | element | React.Node | div | Name of the element that the component should render as. | | pageStart | number | 0 | The number of the first page to load, With the default of 0, the first page is 1. | | hasMore | boolean | false | Whether there are more items to be loaded. Event listeners are removed if false. | | loadMore | loadMore(page: number): void | null | A callback when more items are requested by the user. | | resetPage | boolean | false | Whether the component should reset the page start number. | | threshold | number | 250 | The distance in pixels before the end of the items that will trigger a call to loadMore. | | useWindow | boolean | false | Add scroll listeners to the window, or else, the component's parentNode. | | getScrollParent | getScrollParent(): React.Node | null | Override method to return a different scroll listener if it's not the immediate parent of InfiniteScrollLoading. | | useCapture | boolean | false | Proxy to the useCapture option of the added event listeners. |