README
react-use-infinite-loading
Infinite scroll hook for React
DEMO
https://evankazadaiev.github.io/use-infinite-loading-hook/
Install
NPM
npm install --save react-use-infinite-loading
-------------
YARN
yarn add react-use-infinite-loading
Options
Option | Type | Description | Required | Default value |
---|---|---|---|---|
callback | Function | api request | true | - |
hasMore | Boolean | if server has more items for us | true | - |
startPage | Number | Start page | false | 1 |
offset | Number | Distance for sending request before end of scrolling container | false | 250 |
direction | String // top or bottom | Scroll direction | false | bottom |
Usage
import React from 'react'
import useInfiniteLoading from 'react-use-infinite-loading'
const Example = () => {
const [pokemons, setPokemons] = useState(null);
const getImages = (page) => new Promise(async (resolve) => {
const res = await getPokemons(page, 100);
setPokemons(prev => (prev ? [...prev, ...res] : res));
resolve(res);
});
const [ref, containerRef, isLoading] = useInfiniteScroll({
hasMore: true, // if server-side has more items for us
offset: 100, // send request 100px before the end of scrolling container
direction: 'bottom', // scroll direction
callback: getImages, // api request
});
return (
<div ref={containerRef}>
<ul className="gallery">
{pokemons &&
pokemons.map((pokemon, idx) => (
<Child {...pokemon} key={idx}/>
))}
</ul>
<Loader ref={ref}>{ isLoading && <Spinner color="goldenrod" size="64px" thickness={2} />}</Loader>
</div>
);
};
License
MIT © evankazadaiev