react-super-infinite-scroller

An Infinite Scroll component for React using Intersection Observer API.

⚙️ Installation

npm

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

yarn

1  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

1import InfiniteScroll from "react-super-infinite-scroller";
2
3<InfiniteScroll
4  setPage={setPage}
5  hasMorePages={hasMorePages}
6  showLoader={loading}
7>
8  {items.map((item, index) => (
9    <div key={index}>
10      <h1>{item}</h1>
11    </div>
12  ))}
13</InfiniteScroll>;

Real World example

1import React, { useEffect, useState } from "react";
2import axios from "axios";
3import InfiniteScroll from "react-super-infinite-scroller";
4
5function App() {
6  const [items, setItems] = useState([]);
7  const [page, setPage] = useState(1);
8  const [hasMorePages, setHasMorePages] = useState(true);
9  const [loading, setLoading] = useState(true);
10
11  useEffect(() => {
12    const fetchData = async () => {
13      setLoading(true);
14      const res = await axios.get(
15        `https://dummyjson.com/products?skip=${page - 1}&limit=10`,
16      );
17      setItems((prev) => [...prev, ...res.data.products]);
18      setHasMorePages(items.length < res.data.total);
19      setLoading(false);
20    };
21    fetchData();
22  }, [page]);
23
24  return (
25    <div className="App">
26      <InfiniteScroll
27        setPage={setPage}
28        showLoader={loading}
29        hasMorePages={hasMorePages}
30      >
31        {items.map((p) => (
32          <div className="product" key={p.id}>
33            <img src={p.images[0]} />
34            <div className="data">
35              <p>{p.title}</p>
36              <p>{p.price}$</p>
37            </div>
38          </div>
39        ))}
40      </InfiniteScroll>
41    </div>
42  );
43}
44
45export 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