use-infinite-scroll

use-infinite-scroll

A react hook to use infinite scroll

Install

npm install --save use-infinite-scroll
yarn add use-infinite-scroll

Demo

https://y2507wpz01.codesandbox.io/

Usage

import React, { useState, useEffect } from 'react'
import useInfiniteScroll from 'use-infinite-scroll'

const Example = () => {
  // Note: If you don't set initial value for items,
  // use useEffect(fetchData, []) to load data initially,
  // see example/src/App.js for usecase
  const [ items, setItems ] = useState(Array.from(Array(30).keys(), n => n + 1));
  const [isFetching, setIsFetching] = useInfiniteScroll(fetchData)

  // replace this with your own data fetch function
  function fetchData() {
    setTimeout(() => {
      setItems(prevItems =>
        ([...prevItems, ...Array.from(Array(20).keys(), n => n + prevItems.length + 1)])
      );
      setIsFetching(false);
    }, 2000);
  }

  return (
    <div>
      <ul>
        {items.map(item => <li key={item}>{item}</li>)}
      </ul>
      {isFetching ? 'Fetching...' : 'Not Fetching'}
    </div>
  )
}
// see this code live at https://y2507wpz01.codesandbox.io/

License

MIT © abdullahtariq1171

created using create-react-hook.