React.js Example to Implement Infinite Scrolling on Page Scroll Using react-infinite-scroll-component Library in Javascript

Welcome folks today in this blog post we will be using the react-infinite-scroll-component library to integrate infinite scrolling on page scroll by the user in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js app using the below command as shown below

npx create-react-app sampleapp

cd sampleapp

And after that you need to install the below library using the below command as shown below

npm i react-infinite-scroll-component

And after that you will see the below directory structure of the react.js app as shown below

Showing Simple Circular Dashed Progressbar

Now we can modify the App.js file and copy paste the following code

App.js

import React, { useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";

const style = {
  height: 30,
  border: "1px solid green",
  margin: 6,
  padding: 8,
};

export default function App() {
  const [items, setItems] = useState(Array.from({ length: 20 }));

  return (
    <div>
      <h1>demo: react-infinite-scroll-component</h1>
      <hr />
      <InfiniteScroll
        dataLength={items.length}
        hasMore={true}
        loader={<h4>Loading...</h4>}
      >
        {items.map((i, index) => (
          <div style={style} key={index}>
            div - #{index}
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
}

import React, { useState } from "react";

import InfiniteScroll from "react-infinite-scroll-component";

const style = {

height: 30,

border: "1px solid green",

margin: 6,

padding: 8,

};

export default function App() {

const [items, setItems] = useState(Array.from({ length: 20 }));

return (

<div>

<h1>demo: react-infinite-scroll-component</h1>

<hr />

<InfiniteScroll

dataLength={items.length}

hasMore={true}

loader={<h4>Loading...</h4>}

{items.map((i, index) => (

div - #{index}

</div>

))}

</InfiniteScroll>

</div>

);

}

As you can see we are importing the react-infinite-scroll-component library at the top and then we are rendering the component and inside this we are passing the items array and then we have attached two more attributes which is hasMore and loader where we are displaying the items using the map operator and inside that we are displaying the items. And for the items we are using the hooks variable

Implementing Infinite Scroll on Page Scroll

Now guys we will be modifying the App.js file to add one more attribute which is next it is a callback function to fetch more items once the user goes to the end of the page as shown below

import React, { useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";

const style = {
  height: 30,
  border: "1px solid green",
  margin: 6,
  padding: 8,
};

export default function App() {
  const [items, setItems] = useState(Array.from({ length: 20 }));

  const fetchMoreData = () => {
    // a fake async api call like which sends
    // 20 more records in 1.5 secs
    setTimeout(() => {
      setItems(items.concat(Array.from({ length: 20 })));
    }, 1500);
  };

  
  return (
    <div>
      <h1>demo: react-infinite-scroll-component</h1>
      <hr />
      <InfiniteScroll
        dataLength={items.length}
        next={fetchMoreData}
        hasMore={true}
        loader={<h4>Loading...</h4>}
      >
        {items.map((i, index) => (
          <div style={style} key={index}>
            div - #{index}
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
}

import React, { useState } from "react";

import InfiniteScroll from "react-infinite-scroll-component";

const style = {

height: 30,

border: "1px solid green",

margin: 6,

padding: 8,

};

export default function App() {

const [items, setItems] = useState(Array.from({ length: 20 }));

const fetchMoreData = () => {

// a fake async api call like which sends

// 20 more records in 1.5 secs

setTimeout(() => {

setItems(items.concat(Array.from({ length: 20 })));

}, 1500);

};

return (

<div>

<h1>demo: react-infinite-scroll-component</h1>

<hr />

<InfiniteScroll

dataLength={items.length}

next={fetchMoreData}

hasMore={true}

loader={<h4>Loading...</h4>}

{items.map((i, index) => (

div - #{index}

</div>

))}

</InfiniteScroll>

</div>

);

}

As you can see inside the fetchMoreData() method we are using the setTimeout() method and inside that we are passing the delay of 1500 seconds and inside that we are getting more items using the setItems() hook method. Now if you see inside the browser as the user scrolls to the end of the page you will fetch more items as shown below