Infinite Scrolling

Example: Below is an example of Infinite Scrolling With React Hooks:

CSS

/* Write CSS Here */

h1 {
    text-align: center;
    background-color: green;
    color: white;
    padding: 10px 20px;
}
h2 {
    color: red;
}

JavaScript

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!

Prerequisite:

Tags:

#React-Hooks #ReactJS #Web Technologies

Pagination

Conclusion

Infinite Scrolling

Pagination and Infinite Scrolling with React Hooks

Prerequisite:

Similar Reads