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