article

Tuesday, December 21, 2021

ReactJS Load More Pagination Results

ReactJS Load More Pagination Results

Bootstrap : https://react-bootstrap.github.io/getting-started/introduction/

Install bootstrap

npm install react-bootstrap bootstrap@5.1.3

C:\reactdev\myreactdev>npm install react-bootstrap bootstrap@5.1.3

https://react-bootstrap.github.io/getting-started/introduction/

API call https://reqres.in/ 

https://reqres.in/api/users?per_page=2&page=1

{"page":1,"per_page":2,"total":12,"total_pages":6,"data":[{"id":1,"email":"george.bluth@reqres.in","first_name":"George","last_name":"Bluth","avatar":"https://reqres.in/img/faces/1-image.jpg"},{"id":2,"email":"janet.weaver@reqres.in","first_name":"Janet","last_name":"Weaver","avatar":"https://reqres.in/img/faces/2-image.jpg"}],"support":{"url":"https://reqres.in/#support-heading","text":"To keep ReqRes free, contributions towards server costs are appreciated!"}}

src/index.js
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
)
public/index.html
//public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ReactJS </title>
  </head>
  <body>
    <div id="root"></div>
</body>
</html>
src/App.js
//src/App.js
import React, { useEffect, useState } from 'react';

function App() {
  const perPage = 2;
  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="container" style={{padding: 20}}>
		<div className="row">
			<div className="col-3"></div>
			<div class="col-6">
				<h3>ReactJS Load More Pagination Results</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 btn-primary" onClick={() => setPage(page + 1)}>{loading ? 'Loading...' : 'Load More'}</button>}
			</div>
			<div className="col-3"></div>
		</div>
	</div>
  );
}

export default App;
src/index.css
//src/index.css
.box {
  float: left;
  width: 200px;margin-right:20px;margin-bottom: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;
}

.box .email {
  font-style: italic;padding-left:10px;
  color: #666;
}

.clearfix {
  clear: both;margin-bottom:20px;
}

Related Post