react-super-infinite-scroller v0.4.0

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

License 📜

MIT