react-super-infinite-scroller

An Infinite Scroll component for React using Intersection Observer API.

⚙️ Installation

npm

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

yarn

  yarn add react-super-infinite-scroller

🎉 Features

• 🖱️ Infinite Scrolling - Uses Intersection Observer API (no need to use scroll event listener)
• 🔝 Reverse Scroll - Chat history like scrolling (scroll to top to load more, i.e., reverse scrolling)
• 🎨 Customizable Loading Component - You can use your own loader component
• 📜 TypeScript Support - Written in TypeScript
• 📦 Tiny Bundle - 1.2 kB (minified) size

📖 Usage

Basic example

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

<InfiniteScroll
  setPage={setPage}
  hasMorePages={hasMorePages}
  showLoader={loading}
>
  {items.map((item, index) => (
    <div key={index}>
      <h1>{item}</h1>
    </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}
        showLoader={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

Reverse scroll

🎛️ 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. | | showLoader | 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. | | loader | Node | ❌ no | Custom loader component. | | 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