How To Implement Infinite Scrolling With React.js

In this article, we will learn how to implement infinite scrolling with react.js

We will use react-infinite-scroller for infinite scrolling.

–First, open the react project and install the below package.

npm i react-infinite-scroller

–Then import this package in app.js file.

import React from 'react'
import { useState } from 'react';
import InfiniteScroll from "react-infinite-scroller";

-Then we create an array of which data we want to show.

const posts = [
   { id: 1 },
   { id: 2 },
   { id: 3 },
   { id: 4 },
   { id: 5 },
   { id: 6 },
   { id: 7 },
   { id: 1 },
   { id: 9 },
   { id: 10 },
   { id: 11 },
   { id: 1 },
   { id: 13 },
   { id: 1 },
   { id: 1 },
   { id: 16 },
   { id: 1 },
   { id: 1 },
   { id: 19 },
   { id: 1 },
   { id: 21 },
   { id: 1 },
   { id: 1 },
   { id: 24 },
   { id: 1 },
   { id: 26 },
   { id: 1 },
   { id: 1 },
   { id: 29 },
   { id: 30 },
   { id: 31 },
   { id: 1 },
   { id: 1 },
   { id: 34 },
   { id: 1 },
   { id: 1 },
   { id: 37 },
   { id: 38 },
   { id: 1 },
   { id: 1 },
   { id: 1 },
   { id: 42 },
   { id: 43 },
   { id: 1 },
   { id: 1 },
   { id: 1 },
   { id: 1 },
   { id: 48 },
   { id: 1 },
   { id: 1 },
   { id: 1 },
   { id: 1 },
   { id: 53 },
   { id: 54 },
   { id: 55 },
   { id: 56 },
   { id: 1 },
   { id: 1 },
   { id: 59 },
   { id: 60 }
 ];

-Add the below code in the app.js file

import React from 'react'
import { useState } from 'react';
import InfiniteScroll from "react-infinite-scroller";
function App() {
  const posts = [
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 1 },
    { id: 9 },
    { id: 10 },
    { id: 11 },
    { id: 1 },
    { id: 13 },
    { id: 1 },
    { id: 1 },
    { id: 16 },
    { id: 1 },
    { id: 1 },
    { id: 19 },
    { id: 1 },
    { id: 21 },
    { id: 1 },
    { id: 1 },
    { id: 24 },
    { id: 1 },
    { id: 26 },
    { id: 1 },
    { id: 1 },
    { id: 29 },
    { id: 30 },
    { id: 31 },
    { id: 1 },
    { id: 1 },
    { id: 34 },
    { id: 1 },
    { id: 1 },
    { id: 37 },
    { id: 38 },
    { id: 1 },
    { id: 1 },
    { id: 1 },
    { id: 42 },
    { id: 43 },
    { id: 1 },
    { id: 1 },
    { id: 1 },
    { id: 1 },
    { id: 48 },
    { id: 1 },
    { id: 1 },
    { id: 1 },
    { id: 1 },
    { id: 53 },
    { id: 54 },
    { id: 55 },
    { id: 56 },
    { id: 1 },
    { id: 1 },
    { id: 59 },
    { id: 60 }
  ];
  const itemsPerPage = 20;
  const [hasMoreItems, sethasMoreItems] = useState(true);
  const [records, setrecords] = useState(itemsPerPage);

  const showItems = posts => {
    var items = [];
    for (var i = 0; i < records; i++) {
      items.push(<li key={i}> {posts[i].id}</li>);
    }
    return items;
  };

  const loadMore = () => {
    if (records === posts.length) {
      sethasMoreItems(false);
    } else {
      setTimeout(() => {
        setrecords(records + itemsPerPage);
      }, 2000);
    }
  };

  return (
    <div
      style={{
        height: "300px",
        overflow: "auto",
        backgroundColor: "#AAB7B8",
        padding: "10px"
      }}
    >
      <InfiniteScroll
        loadMore={loadMore}
        hasMore={hasMoreItems}
        loader={<div className="loader"> Loading... </div>}
        useWindow={false}
      >
        {showItems(posts)}
      </InfiniteScroll>
    </div>
  )
}

export default App

output: