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
Steps to implement load more pagination in React
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.
1 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | import React, { useState } from 'react'; function App() { const [userList, setUserList] = useState([]); return ( <div className="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} className="box"> <img src={x.avatar} /> <div className="name">{x.first_name} {x.last_name}</div> <div className="email">{x.email}</div> </div> })} <div className="clearfix"></div> <button className="btn-load-more">Load More</button> </div> ); } export default App; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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.
1 | {totalPages !== page && <button className="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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | 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 className="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} className="box"> <img src={x.avatar} /> <div className="name">{x.first_name} {x.last_name}</div> <div className="email">{x.email}</div> </div> })} <div className="clearfix"></div> {totalPages !== page && <button className="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..!! 🙂
