Infinite Scrolling
Example: Below is an example of Infinite Scrolling With React Hooks:
/* Write CSS Here */
h1 {
text-align: center;
background-color: green;
color: white;
padding: 10px 20px;
}
h2 {
color: red;
}
import React, {
useState,
useEffect
} from 'react';
import './App.css';
const InfiniteScroll = () => {
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const [page, setPage] = useState(1);
const [hasMore, setHasMore] = useState(true);
useEffect(() => {
fetchPosts();
}, [page]);
const fetchPosts = async () => {
setLoading(true);
try {
const response = await fetch(
`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`);
const data = await response.json();
setPosts(prevPosts => [...prevPosts, ...data]);
setHasMore(data.length > 0);
} catch (error) {
console.error('Error fetching posts:', error);
} finally {
setLoading(false);
}
};
const handleScroll = () => {
if (!loading && hasMore &&
window.innerHeight + document.documentElement.scrollTop >=
document.documentElement.scrollHeight - 20) {
setPage(prevPage => prevPage + 1);
}
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, [loading, hasMore]);
return (
<div>
<h1>Infinite Scroll</h1>
<div className="posts">
{posts.map(post => (
<div key={post.id} className="post">
<h3>{post.title}</h3>
<p>{post.body}</p>
</div>
))}
<h2>
{loading && <div>Loading...</div>}
</h2>
</div>
</div>
);
};
export default InfiniteScroll;
Output :
Pagination and Infinite Scrolling with React Hooks
In the world of web development, making long lists of items like posts, products, or comments easy to navigate is super important. Two common ways to do this are Pagination and Infinite Scrolling. In this guide, we’ll walk through how to implement both of these techniques using React Hooks. Don’t worry if you’re new to React or programming – we’ll take it step by step!