react-super-infinite-scroller

An Infinite Scroll component for React using Intersection Observer API.


Keywords
react-infinite-scroll, react, infinite, scroller, infinite-scroll-react, infinite-scroll, infinite-scrolling, intersection-observer, react-infinite-scroll-component, react-infinite-scroller
License
MIT
Install
npm install react-super-infinite-scroller@0.4.0

Documentation

react-super-infinite-scroller

An Infinite Scroll component for React using Intersection Observer API.

npm version coverage snyk MIT License

Installation πŸ“¦

npm

  npm install --save react-super-infinite-scroller

yarn

  yarn add react-super-infinite-scroller

Usage

Basic example

import InfiniteScroll from "react-super-infinite-scroller";

<InfiniteScroll setPage={setPage} hasMorePages={hasMorePages} loading={loading}>
  {items.map((item, index) => (
    <div key={index}>
      <h1>{item.title}</h1>
      <p>{item.body}</p>
    </div>
  ))}
</InfiniteScroll>;

Real World example

import React, { useEffect, useState } from "react";
import axios from "axios";
import InfiniteScroll from "react-super-infinite-scroller";

function App() {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMorePages, setHasMorePages] = useState(true);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      const res = await axios.get(
        `https://dummyjson.com/products?skip=${page - 1}&limit=10`,
      );
      setItems((prev) => [...prev, ...res.data.products]);
      setHasMorePages(items.length < res.data.total);
      setLoading(false);
    };
    fetchData();
  }, [page]);

  return (
    <div className="App">
      <InfiniteScroll
        setPage={setPage}
        loading={loading}
        hasMorePages={hasMorePages}
      >
        {items.map((p) => (
          <div className="product" key={p.id}>
            <img src={p.images[0]} />
            <div className="data">
              <p>{p.title}</p>
              <p>{p.price}$</p>
            </div>
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
}

export default App;

Demo

Live Example πŸ§‘β€πŸ’»

Infinite scroll with 100 elements
Open with CodeSandbox

Reverse scroll
Open with CodeSandbox

props

name type required description
setPage function βœ… yes useState function to set the page number.
hasMorePages boolean βœ… yes If there are more items to load.
loading boolean βœ… yes It tells if data is fetching. When new items are fetching loading state is set to true
children Node βœ… yes Items you need to scroll.
reverse boolean ❌ no Scroll and load items in reverse from top.
thresholdValue number ❌ no Value (between 0.0 and 1.0), representing the percentage target element is visible to trigger the callback.
rootElement HTMLElement ❌ no Root element of the observer. The element that is used as the viewport for checking visibility of the target. Default is document viewport.
rootMarginValue string ❌ no Margin around the target element. rootMarginValue represents the margin around the target element that must be in view in order to trigger a callback.

License

MIT