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.