@closeio/use-infinite-scroll

1.0.0 • Public • Published

use-infinite-scroll

NPM JavaScript Style Guide

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';

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

Readme

Keywords

none

Package Sidebar

Install

npm i @closeio/use-infinite-scroll

Weekly Downloads

152

Version

1.0.0

License

MIT

Unpacked Size

21.6 kB

Total Files

6

Last publish

Collaborators

  • krishanmarco
  • marco.tisi
  • schiavi-close
  • treyatclose
  • taylorbrooks
  • philfreo
  • buzinas
  • bgryszko
  • lukasmlady