Mastering Infinite Scroll in React JS

Table of Contents

1. Introduction
2. Setting up the Project
3. Adding the Infinite Scroll Component
4. Rendering Content inside the Scroll
5. Styling the Infinite Scroll
6. Fetching More Data on Scroll
7. Adding Loading Indicator
8. Ending the Infinite Scroll
9. Implementing Scroll within a Div
10. Implementing Scroll within Parallax

Introduction

In this article, we will explore how to use infinite scroll in a React.js project. Infinite scroll is a popular feature that allows users to continuously scroll through content without having to manually load new content. We will learn how to render the content inside the scroll, fetch additional data when the user reaches the bottom, and display a loading indicator while fetching data. Additionally, we will explore how to implement infinite scroll within a specific div or within a parallax component.

Setting up the Project

To get started, make sure You have an empty React.js project set up. Install the react-infinite-scroll-component Package using the following command:

npm install react-infinite-scroll-component

Next, import the InfiniteScroll component from the react-infinite-scroll-component package.

Adding the Infinite Scroll Component

Inside your React component, add the InfiniteScroll component. This component will wrap around the content that you want to render inside the infinite scroll.

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

function App() {
  return (
    <div>
      <InfiniteScroll>
        {/* Content goes here */}
      </InfiniteScroll>
    </div>
  );
}

Rendering Content inside the Scroll

To render content inside the scroll, you can use a state to store an array of data that can be looped through. Let's add a state called dataSource and initialize it as an empty array.

import { useState } from 'react';

function App() {
  const [dataSource, setDataSource] = useState([]);

  return (
    <div>
      <InfiniteScroll>
        {dataSource.map((item, index) => (
          <div key={index}>
            This is item {index + 1}
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
}

In the above example, we loop through the dataSource array using the map function and display each item with an index.

Styling the Infinite Scroll

To style the infinite scroll component, you can add CSS styles. For example, you can add a border, padding, and margin to the content inside the scroll.

function App() {
  const [dataSource, setDataSource] = useState([]);

  return (
    <div>
      <InfiniteScroll>
        {dataSource.map((item, index) => (
          <div key={index} style={{ border: '1px solid green', margin: '12px', padding: '8px' }}>
            This is item {index + 1}
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
}

Feel free to customize the styles according to your needs.

Fetching More Data on Scroll

To fetch more data when the user reaches the bottom of the scroll, you can use the next prop of the InfiniteScroll component. This prop specifies a callback function that will be called when the user reaches the end of the scroll.

function App() {
  const [dataSource, setDataSource] = useState([]);

  const fetchMoreData = () => {
    setTimeout(() => {
      const newData = [...dataSource, ...Array(20).fill(null)];
      setDataSource(newData);
    }, 1000);
  };

  return (
    <div>
      <InfiniteScroll
        next={fetchMoreData}
      >
        {dataSource.map((item, index) => (
          <div key={index} style={{ border: '1px solid green', margin: '12px', padding: '8px' }}>
            This is item {index + 1}
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
}

In the above example, the fetchMoreData function is called after a delay of 1000ms (1 Second). Inside the function, new data is appended to the existing dataSource array using the concat method. The new data is an array of 20 elements filled with null values. Finally, the updated dataSource is set using the setDataSource function.

Adding Loading Indicator

To display a loading indicator while fetching data, you can use the loader prop of the InfiniteScroll component. This prop allows you to render any React component as a loader.

function App() {
  const [dataSource, setDataSource] = useState([]);

  const fetchMoreData = () => {
    setTimeout(() => {
      const newData = [...dataSource, ...Array(20).fill(null)];
      setDataSource(newData);
    }, 1000);
  };

  return (
    <div>
      <InfiniteScroll
        next={fetchMoreData}
        loader={<p>Loading...</p>}
      >
        {dataSource.map((item, index) => (
          <div key={index} style={{ border: '1px solid green', margin: '12px', padding: '8px' }}>
            This is item {index + 1}
          </div>
        ))}
      </InfiniteScroll>
    </div>
  );
}

In the above example, the loader prop is set to a p tag with the text "Loading...". This loader will be displayed when the fetchMoreData function is called.

Ending the Infinite Scroll

To indicate that all the data has been fetched and there is no more data available, you can update the hasMore prop of the InfiniteScroll component. Set this prop to false when there is no more data to fetch.

function App() {
  const [dataSource, setDataSource] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  const fetchMoreData = () => {
    setTimeout(() => {
      const newData = [...dataSource, ...Array(20).fill(null)];
      setDataSource(newData);

      if (dataSource.length >= 200) {
        setHasMore(false);
      }
    }, 1000);
  };

  return (
    <div>
      <InfiniteScroll
        next={fetchMoreData}
        hasMore={hasMore}
        loader={<p>Loading...</p>}
      >
        {dataSource.map((item, index) => (
          <div key={index} style={{ border: '1px solid green', margin: '12px', padding: '8px' }}>
            This is item {index + 1}
          </div>
        ))}
      </InfiniteScroll>
      {!hasMore && <p>You are all set</p>}
    </div>
  );
}

In the above example, the hasMore state is initially set to true. After fetching 200 records, the hasMore state is set to false, indicating that there is no more data to fetch. The conditional rendering of the "You are all set" message ensures that it is only displayed when hasMore is false.

Implementing Scroll within a Div

If you want to implement the infinite scroll within a specific div, you can use the style prop of the InfiniteScroll component to define the Height and overflow of the scrollable div.

function App() {
  const [dataSource, setDataSource] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  const fetchMoreData = () => {
    setTimeout(() => {
      const newData = [...dataSource, ...Array(20).fill(null)];
      setDataSource(newData);

      if (dataSource.length >= 200) {
        setHasMore(false);
      }
    }, 1000);
  };

  return (
    <div>
      <p style={{ fontWeight: 'bold' }}>Infinite Scroll Tutorial</p>
      <div style={{ height: '500px', overflow: 'auto' }}>
        <InfiniteScroll
          style={{ overflow: 'visible' }}
          next={fetchMoreData}
          hasMore={hasMore}
          loader={<p>Loading...</p>}
        >
          {dataSource.map((item, index) => (
            <div key={index} style={{ border: '1px solid green', margin: '12px', padding: '8px' }}>
              This is item {index + 1}
            </div>
          ))}
        </InfiniteScroll>
      </div>
      {!hasMore && <p>You are all set</p>}
    </div>
  );
}

In the above example, a parent div with a height of 500px is added to contain the infinite scroll. The overflow property of both the parent div and the InfiniteScroll component is set to 'auto' to enable scrolling.

Implementing Scroll within Parallax

If you want to implement the infinite scroll within a parallax component, you can set the height and overflow of the scrollable div accordingly.

function App() {
  const [dataSource, setDataSource] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  const fetchMoreData = () => {
    setTimeout(() => {
      const newData = [...dataSource, ...Array(20).fill(null)];
      setDataSource(newData);

      if (dataSource.length >= 200) {
        setHasMore(false);
      }
    }, 1000);
  };

  return (
    <div>
      <div style={{ height: '400px' }}>
        <div id="parentScrollDiv" style={{ height: '500px', overflow: 'auto' }}>
          <InfiniteScroll
            scrollableTarget="parentScrollDiv"
            next={fetchMoreData}
            hasMore={hasMore}
            loader={<p>Loading...</p>}
          >
            {dataSource.map((item, index) => (
              <div key={index} style={{ border: '1px solid green', margin: '12px', padding: '8px' }}>
                This is item {index + 1}
              </div>
            ))}
          </InfiniteScroll>
        </div>
      </div>
      {!hasMore && <p>You are all set</p>}
    </div>
  );
}

In the above example, a parent div of height 400px is used to simulate the parallax component. The scrollableTarget prop of the InfiniteScroll component is set to the id of the parent scrollable div to Bind the scrolling behavior.

Conclusion

In this article, we learned how to implement infinite scroll in a React.js project. We covered how to render content inside the scroll, fetch more data on scroll, display a loading indicator, and indicate the end of the infinite scroll. Additionally, we explored how to implement the infinite scroll within a specific div or within a parallax component. By utilizing the react-infinite-scroll-component package, we can easily add this popular feature to our React applications.

FAQ

Q: Can I customize the loading indicator? A: Yes, you can customize the loading indicator by passing a custom React component as the loader prop. This allows you to style it according to your design preferences.

Q: Can I use infinite scroll with pagination? A: Yes, you can use infinite scroll in conjunction with pagination. By implementing the logic to fetch more data based on the current page number or any other pagination mechanism, you can achieve a seamless user experience.

Q: Are there any limitations to using infinite scroll? A: Infinite scroll is a great feature for displaying large amounts of data without overwhelming the user. However, it may not be suitable for all scenarios. Consider factors like server load, data complexity, and user experience when deciding to implement infinite scroll.