react-infinite-page

1.0.1 • Public • Published

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.

Dependencies (3)

Dev Dependencies (17)

Package Sidebar

Install

npm i react-infinite-page

Weekly Downloads

3

Version

1.0.1

License

ISC

Unpacked Size

13.5 kB

Total Files

5

Last publish

Collaborators

  • alan2207