closeio/use-infinite-scroll

Super simple React hook for creating an infinite scroll experience based on the IntersectionObserver API

use-infinite-scroll

Super simple React hook for creating an infinite scroll experience based on the IntersectionObserver API.

Check the live DEMO.

Interested in working on projects like this? Close is looking for great engineers to join our team!

Install

yarn add @closeio/use-infinite-scroll

Benefits

• Extremely lightweight (less than 1KB minzipped).
• It uses the IntersectionObserver API, so it doesn't need to listen to scroll events – which are known to cause performance issues.
• No other 3rd-party dependencies.

Usage

import React from 'react';
import useInfiniteScroll from '@closeio/use-infinite-scroll';

export default function MyComponent() {
  const [items, setItems] = useState([]);
  const [hasMore, setHasMore] = useState(false);
  const [page, loaderRef, scrollerRef] = useInfiniteScroll({ hasMore });

  useEffect(async () => {
    const data = await myApiCall({ page });
    setHasMore(data.hasMore);
    setItems(prev => [...prev, data.items]);
  }, [page]);

  return (
    <div ref={scrollerRef}>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
      {hasMore && <div ref={loaderRef}>Loading…</div>}
    </div>
  );
}

License

MIT © Close