react-infinite-scroll-loading v0.2.0

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