How to create infinite scroll for list of post in mobile and desktop using React

Question

How can I create an infinite scroll using React/Typescript? I want to display a list of 10 post at first then when the users views the 10th one then another phase of 10 should be loaded on the screen. Kindly help out with a code demo.

This currently what I have achieved which is currently displaying all post

import PostStyles from "../../../components/ui/createPost/_createpost.module.scss"
import CreatePost from "../createPost/createPost"
import Post from "../post/post"
import Modal from "../createPost/Modal"
import { postType } from "../../../util/types"


type mainSectionType = {
  posts:postType[]
}

type postType = {
    _id: string;
    creator: {
      id: string,
      name: string,
      profilePicture: string
    },
    createdAt: string,
    photos: string[],
    post_description: string,
    time_posted: string,
  }

const MainSection = ({posts}:mainSectionType) => {


  return (
    <>
      <Modal />
      <div className={PostStyles.post__create_postContainer}>
        <CreatePost />
      </div>
      <div className={PostStyles.post__posts_container}>
         {
          posts.map((post, index) => {
            return <Post
              key={index}
              post_desc={post.post_description}
              postID={post._id}
              username={post.creator.name}
              timeposted={post.time_posted}
              userImg={post.creator.profilePicture}
              photos={post.photos}
            />
          })
        } 
      </div>

    </>
  )
}

export default MainSection

For the simplest approach, you need paging on the server, then you control and append new pages on bottom based on scroll position, (while also removing from the top, or else the HTML will grow indefinitely). — Pablo Recalde, Jul 15 '23 at 01:19
My endpoint will be returning post based on the limit and page I pass to the params. My question is how do I execute infinite scrolling at the FRONTEND LEVEL using Typescript? A lot of the content available are just pure React — Orisfina, Jul 15 '23 at 01:42

Chaudhari Devam · Accepted Answer · 2023-07-28T05:53:59.430

You can use this package for infinite scroll ->

package name: 'react-infinite-scroll-component'

example:

State :

   const [startIndex, setStartIndex] = useState(0);
      const [slicedData, setSlicedData] = useState([] as interface type name here);
   const [hasMore, setHasMore] = useState(true);

API response:

   setSlicedData(res.slice(0, 10));

HandleNextData function :

const handleNextData = () => {
        /*endIndex find min index like startIndex start from 0 then + 100 and 
data.length from that minimum number will be endIndex. */
    
const endIndex = Math.min(startIndex + 100, data.length);
        
        /* In nextBatch where startIndex and endIndex represent the index of items 
                in that data. method returns a shallow copy of a portion of an 
                            array into a new array object */


        const nextBatch = data.slice(startIndex, endIndex);
        setSlicedData((prevData) => [...prevData, ...nextBatch] as interface name here);

        setHasMore(endIndex < data.length);

        setStartIndex(endIndex);
};

Component:

<InfiniteScroll
    dataLength={your store data state name here.length}                     
    next={handleNextData}
    hasMore={hasMore}
    loader={<h4>Loading more 2 items...</h4>}
    scrollableTarget='scrollableDiv'
>
    {Children}
</InfiniteScroll>

score 0 · Answer 2 · answered Jul 15 '23 at 06:27

const handleScroll = () => {
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.offsetHeight;
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const isBottom = scrollTop + windowHeight >= documentHeight;

 if (isBottom && !isLoading) {
   fetchMorePosts();
 }
};

useEffect(() => {
window.addEventListener('scroll', handleScroll);

return () => {
  window.removeEventListener('scroll', handleScroll);
 };
}, [handleScroll]);

You can use this code for it. I hope it helps.

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jul 16 '23 at 14:08

How to create infinite scroll for list of post in mobile and desktop using React

2 Answers2