Hooks
useInfiniteScroll
Easily implement infinite scrolling to load more data as the user scrolls with useInfiniteScroll.
Install
npm
npm i use-any-hook
Description
The useInfiniteScroll
hook simplifies the implementation of infinite scrolling in your React application. It allows you to load more data automatically as the user scrolls to the bottom of the page or a container. This hook is particularly useful for applications that need to fetch and display a large dataset in chunks, improving both performance and user experience.
Parameters
Name | Type | Description |
---|---|---|
loadMore | () => void | A function to be called when more data needs to be loaded. This function should handle the data fetching logic. |
Return Values
Name | Type | Description |
---|---|---|
isFetching | boolean | A boolean indicating whether the hook is currently fetching more data. This can be used to show loading indicators. |
Example
useInfiniteScroll.example.tsx
import { useInfiniteScroll } from "use-any-hook";
function InfiniteScrollExample() {
const [items, setItems] = useState([]);
const [page, setPage] = useState(1);
// Simulated function to fetch more data
const fetchMoreData = async () => {
// Simulated API call to fetch more items (e.g., from a backend server)
const response = await fetch(`https://api.example.com/items?page=${page}`);
const newData = await response.json();
// Update the items and page
setItems([...items, ...newData]);
setPage(page + 1);
};
const isFetching = useInfiniteScroll(fetchMoreData);
useEffect(() => {
// Initial data fetch when the component mounts
fetchMoreData();
}, []);
return (
<div>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
{isFetching && <p>Loading more items...</p>}
</div>
);
}