Nocturnal Parakeet Monitor

    @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

    Keywords

    none

    Install

    npm i @closeio/use-infinite-scroll

    DownloadsWeekly Downloads

    182

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    21.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • taylorbrooks
    • philfreo
    • buzinas
    • bgryszko
    • lukasmlady