Skip to content

Infinite Scroll component for React using Intersection Observer API.

License

Notifications You must be signed in to change notification settings

AbhishekMondal1/react-super-infinite-scroller

Repository files navigation

react-super-infinite-scroller

An Infinite Scroll component for React using Intersection Observer API.

npm version coverage minified dize snyk MIT License

⚙️ 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
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.
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