react-use-infinite-loading

Infinite scroll hook for React. Supports multiple scroll directions.

Usage no npm install needed!

<script type="module">
  import reactUseInfiniteLoading from 'https://cdn.skypack.dev/react-use-infinite-loading';
</script>

README

react-use-infinite-loading

Infinite scroll hook for React

NPM JavaScript Style Guide

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