DEV Community

Cover image for Infinite Scrolling with React
karam koujan
karam koujan

Posted on

Infinite Scrolling with React

Infinite scrolling is a web-design technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination. This technique is used by social media sites and in this article we are going to learn how to implement infinite scrolling in our apps using React.

At first we are going to create a new react app

npx create-react-app infinite-scrolling-app 
cd infinite-scrolling-app
npm start
Enter fullscreen mode Exit fullscreen mode

we install react-waypoint, a loading react component to execute a function whenever you scroll to an element.

npm install react-waypoint
Enter fullscreen mode Exit fullscreen mode

we create a data array that contains elements we want to show on the screen.

export const data = [
  {
    id:1,
    text: "hello, new post"
  },
  {
    id:2,
    text: "hello, new post"
  },
  {
    id:3,
    text: "hello new post"
  },
  {
    id:4,
    text: "hello new post"
  },
  {
    id:5,
    text: "hello new post"
  },
  {
    id:6,
    text: "hello new post"
  },
  {
    id:7,
    text: "hello new post"
  },
  {
    id:8,
    text: "hello new post"
  },
  {
    id:9,
    text: "hello new post"
  },
  {
    id:10,
    text: "hello new post"
  },
  {
    id:11,
    text: "hello new post"
  },
  {
    id:12,
    text: "hello new post"
  },
  {
    id:13,
    text: "hello new post"
  },
  {
    id:14,
    text: "hello new post"
  },
  {
    id:15,
    text: "hello new post"
  },
  {
    id:16,
    text: "hello new post"
  },
  {
    id:17,
    text: "hello new post"
  }
] 
Enter fullscreen mode Exit fullscreen mode

we create a costume hook that will take the data and limit of elements we want to show and the page that we want to show next.

export const useInfiniteScroll = (data, limit, page) => {
  const ending = limit * page + 1;
  return data.slice(0, ending);
}
Enter fullscreen mode Exit fullscreen mode

now we create a component as a container and show the first page of the data we will consider 4 elements as a limit.

import React,{ useState } from "react";
import {data} from "./data.js";
import {useInfiniteScroll} from "./useInfiniteScroll";
import "./styles.css";

export default function App() {
  const limit = 4 ;
  const [page, setPage] = useState(1);
  const elements = useInfiniteScroll(data,limit, page);
  return (
    <div className="container">
      {elements.map(element => (
          <p>{element.text}</p>    
     ))}
    </div>
  );
} 
Enter fullscreen mode Exit fullscreen mode

we will add some styling to the container to show the scroll.

.container {
  background-color: red;
  font-family: sans-serif;
  text-align: center;
  height: 180px;
  overflow-y: scroll;
}
Enter fullscreen mode Exit fullscreen mode


import React,{ useState } from "react";
import {data} from "./data.js";
import {useInfiniteScroll} from "./useInfiniteScroll";
import {Waypoint} from "react-waypoint";
import "./styles.css";

export default function App() {
  const limit = 4
  const [page, setPage] = useState(1);
  const elements = useInfiniteScroll(data, limit, page);
  return (
    <div className="container">


      {elements.map(element => (
        <React.Fragment key={element.id}>
          <p>{element.text}</p> 

            { element.id - 1 === limit * page ? (
    <Waypoint onEnter={() => setPage(page+1)} /> ) : null} 
          </React.Fragment>
     ))}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

after showing the first page on the screen we want to show the next page when we scroll, for that we are going to use react-waypoint component that executes a function when we scroll to an element.
we put the condition to show the next page when we scroll to the last element.
Congratulations ! we have made infinite scrolling with react.
you can see the code in this sandbox

Top comments (0)