Author -  Sai gowtham

How to add Infinite Scroll in React.js app

In this tutorial, we are going to learn about how to implement infinite scroll in react by using react-infinite-scroll-component.

What is Infinite Scroll

Infinite Scroll helps us to load the data continuously when a user scrolls down the page.

Installing react infinite scroll

We are installing a new package called react-infinite-scroll-component which provides us a infinite scroll component.

Run the following command in your terminal to install the package.

npm i react-infinite-scroll-component

Example

This is a simple example of using react-infinite-scroll-component.

import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";import axios from "axios";
import "./styles.css";

class App extends React.Component {
  state = {
    breweries: [],
    pageNumber: 1,
    items: 15,
    hasMore: true
  };

  componentDidMount() {
      //initial request is sent
    this.fetchData();
  }

  fetchData = () => {
    axios
      .get(
        `https://api.openbrewerydb.org/breweries?page=${
          this.state.pageNumber
        }&per_page=${this.state.items}`
      )
      .then(res =>
        this.setState({
          //updating data
          breweries: [...this.state.breweries, ...res.data],
          //updating page numbers
          pageNumber: this.state.pageNumber + 1
        })
      );
  };

  render() {
    return (
      <div className="App">
        <InfiniteScroll
          dataLength={this.state.breweries.length} //This is important field to render the next data          next={this.fetchData}          hasMore={this.state.hasMore}          loader={<h4>Loading...</h4>}        >
          {this.state.breweries.map(brewery => (
            <ul className="user" key={brewery.name}>
              <li>Name: {brewery.name}</li>
            </ul>
          ))}
        </InfiniteScroll>
      </div>
    );
  }
}

export default App;

In the above code, we first imported InfiniteScroll component from the package we just installed.

We passed four props to <InfiniteScroll> component which are datalength, next, hasMore, and loader.

  • dataLength: It takes the current data length.
  • next: It takes the fetch data method and invokes this method whenever a user reaches the bottom of a page.
  • hasMore: It takes the boolean value.
  • loader: It takes the loading spinner, which is rendered at the time of a api request is still in process.

react-infinite-scroll-example

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2023 (Beginner + Advanced)
JavaScript - The Complete Guide 2023 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY