react-infinite-page

React component for infinite scrolling.

Installation:

npm install --save react-infinite-page

Usage:

import InfinitePage from 'react-infinite-page';

const Component = () => (
  <div>
    <h3>Example</h3>
    <InfinitePage
      className=""
      style={{ height: '70vh', border: '1px solid black' }}
      pageParam="page"
      fixed
      fetchData={api}
      dataSelector={res => res}
      metaSelector={res => ({ totalPages: 10 })}
      loader={<div className="loader" />}
      beforeInitialLoad={() => console.log('Initi')}
      afterInitialLoad={() => console.log('Done')}
    >
      {data =>
        data.map(item => (
          <div key={item}>
            <Link to={`/item/${item}`}>{item}</Link>
          </div>
        ))
      }
    </InfinitePage>
  </div>
);

For more thorough example you can check out the examples folder.

Props:

style | object

Custom styles for the component.

pageParam | string | default: 'page'

The query parameter that will control pagination.

fixed | boolean | default: false

Checks if the component should be scrollable or not.

fetchData | function | required

Function that will fetch the data. It's return value must be a promise.

dataSelector | function | required

Function that extracts the data from resolved promise returned by fetchData function.

metaSelector | function | required

Function that extracts the meta data from resolved promise returned by fetchData function. meta object must contain totalPages property.

loader | JSX element | default:

Loading...

Custom loader to display on top or bottom of the component while loading more data.

beforeInitialLoad | function | default: noop function

Function that gets triggered when the component is mounted and before fetching the data. Convinient to show some loader spinner until the initial data is loaded.

afterInitialLoad | function | default: noop function

Function that gets triggered when the result of fetchData has resolved. Convinient to hide loader when the data has been loaded.