Load more pagination in React

Today, we’ll show you how to implement load more pagination in React.

Sometimes, we may need to implement pagination or load the items based on the Load More button click, same as an ecommerce site.

So here, we will implement the API call using React Hooks to fetch the data and manage the pagination using the Load More button.

Demo Application

Output - Load more pagination in React - Clue Mediator

Steps to implement load more pagination in React

1. Create a react app
2. Design the page
3. Add API call
4. Handle load more button
5. Output

1. Create a react app

First, we will create a react app using the `create-react-app` npm package. Run the following command to create a react app.

npx create-react-app load-more-pagination-react

2. Design the page

Let’s design the page, where we will show the image, name and email in the box design. Add the following code in the react component.

App.js

import React, { useState } from 'react';

function App() {
  const [userList, setUserList] = useState([]);

  return (
    <div class="App">
      <h3>Load more pagination in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
      {userList.map((x, i) => {
        return <div key={i} class="box">
          <img src={x.avatar}>
          <div class="name">{x.first_name} {x.last_name}</div>
          <div class="email">{x.email}</div>
        </div>
      })}
      <div class="clearfix"></div>
      <button class="btn-load-more">Load More</button>
    </div>
  );
}

export default App;

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.App {
  width: 730px;
  margin: 0 auto;
  text-align: center;
}

.box {
  float: left;
  width: 200px;
  margin: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #f5f5f5;
  padding-bottom: 10px;
}

.box img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.box .name {
  padding: 10px 10px 5px 10px;
  font-weight: 600;
}

.box .email {
  font-style: italic;
  color: #666;
}

button.btn-load-more {
  padding: 10px 20px;
  margin: 20px 0 30px 0;
  cursor: pointer;
}

.clearfix {
  clear: both;
}

3. Add API call

Now, we will integrate the API to fetch the user data and load on the page.

const perPage = 3;
const [totalPages, setTotalPages] = useState(1);
const [page, setPage] = useState(1);

const [userList, setUserList] = useState([]);
const [loading, setLoading] = useState(false);

useEffect(() => {
  const getUserList = () => {
    setLoading(true);
    fetch(`https://reqres.in/api/users?per_page=${perPage}&page=${page}`)
      .then(res => res.json())
      .then(res => {
        setTotalPages(res.total_pages);
        setUserList([...userList, ...res.data]);
        setLoading(false);
      });
  }
  getUserList();
}, [page]);

4. Handle load more button

At last, we have to handle the Load More button to manage the pagination and fetch the data. We will hide the button when all data is loaded.

{totalPages !== page && <button class="btn-load-more" onclick="{()" ==""> setPage(page + 1)}>{loading ? 'Loading...' : 'Load More'}</button>}

5. Output

Let’s combine all code together and see how it looks.

App.js

import React, { useEffect, useState } from 'react';

function App() {
  const perPage = 3;
  const [totalPages, setTotalPages] = useState(1);
  const [page, setPage] = useState(1);

  const [userList, setUserList] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const getUserList = () => {
      setLoading(true);
      fetch(`https://reqres.in/api/users?per_page=${perPage}&page=${page}`)
        .then(res => res.json())
        .then(res => {
          setTotalPages(res.total_pages);
          setUserList([...userList, ...res.data]);
          setLoading(false);
        });
    }
    getUserList();
  }, [page]);

  return (
    <div class="App">
      <h3>Load more pagination in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
      {userList.map((x, i) => {
        return <div key={i} class="box">
          <img src={x.avatar}>
          <div class="name">{x.first_name} {x.last_name}</div>
          <div class="email">{x.email}</div>
        </div>
      })}
      <div class="clearfix"></div>
      {totalPages !== page && <button class="btn-load-more" onclick="{()" ==""> setPage(page + 1)}>{loading ? 'Loading...' : 'Load More'}</button>}
    </div>
  );
}

export default App;

Run the application and check the output in the browser.

I hope you find this article is helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project