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
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
props
name | type | required | description |
---|---|---|---|
setPage |
function |
|
useState function to set the page number. |
hasMorePages |
boolean |
|
If there are more items to load. |
loading |
boolean |
|
It tells if data is fetching. When new items are fetching loading state is set to true |
children |
Node |
|
Items you need to scroll. |
reverse |
boolean |
|
Scroll and load items in reverse from top. |
thresholdValue |
number |
|
Value (between 0.0 and 1.0), representing the percentage target element is visible to trigger the callback. |
rootElement |
HTMLElement |
|
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 |
|
Margin around the target element. rootMarginValue represents the margin around the target element that must be in view in order to trigger a callback. |