PAGINATION using react/Paginate

Hello everyone, let's build a new feature with this article (i.e. pagination) many of you are already aware and have seen this feature in many websites with lots of data so here let's build one for our application as a beginner.
let's first install the library.
if you use npm

npm install react-paginate

if you use yarn

yarn add react-paginate

In this article, our main aim is to work on the logic and implementation of pagination so let's just import fake data to display on different pages. I have used Fake-data to create fake data just for testing our pagination feature you can do the same.
Our code and website before pagination feature.

import react, {useState} from 'react';
import fakedata from "./Fake_data.json"
import './App.css';

function App() {

  const [data, setData] =useState(fakedata.slice(0,50));
  return (
    <>
     <div className="header"> <h2>WELCOME TO FAKEDATA WORLD</h2></div>
    <div className="App">
    { data.map((x)=>{
      return(
        <div className="card">
          <h3>{x.FullName}</h3>
          <h3>{x.CompanyName}</h3>
          <h3>{x.URL}</h3>
          </div>
      );
    })
    }    
    </div>
    </>
  );
}

export default App;

.header
{
  color: black;
  text-align: center;
  cursor: pointer;
  font-style: italic;
  font-family: fantasy;
  background: blueviolet;
}

.App{
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  color: grey;
  background-color: pink;
}

.card{

    border: 2px solid grey;
    border-radius: 10px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 300px;
    height: 300px;
    margin: 20px;
}

Can you see the length of the scroll bar isn't it too long and not at all user-friendly, making the site slow as well as all the data will be loaded at once
okay, let's decide first how many blocks per page we should be displaying
then we will go to the second step that would be the number of pages visited till now which can be easily calculated by the number of blocks we have on one page multiplied by the current page number.
Our next step should be to make a function for displaying blocks and we slice blocks per page where we map the blocks by slicing it into a range from page visited + blocks per page to get an idea like it's is in a group of let's say (1-6) at first then (6-12) and so on.
Now, we call the function in our render part with paginate component of react-pagination library, we do need previous and next button with the page count where it would be the number of pages in total that would be present in the website we would be using simple math for calculating it(i.e Number of blocks divided by Number of blocks to be fetched per page).
Yes, it is that simple to add a pagination feature I have attached the code also
I have attached the code for the same and did change the CSS also I have also attached the GitHub repo for this as well.

import react, {useState} from 'react';
import Paginate from 'react-paginate';
import fakedata from "./Fake_data.json"
import './App.css';

// let's make a funtion for diaplaying data
function App() {

  const [data, setData] =useState(fakedata.slice(0,40));
  const [pageNumber, setPageNumber] =useState(0);
  const dataPerPage =6;
  const pageVisited = pageNumber * dataPerPage;

  // making function for fetching data
  const fetchData = data.slice(pageVisited, pageVisited + dataPerPage).map((x)=>{
    return(
      <div className="card">
        <h3>{x.FullName}</h3>
        <h3>{x.CompanyName}</h3>
        <h3>{x.URL}</h3>
        </div>
    );
  })
// we are using ceil function here because if it not proper divisible value then we need an extra page for
// the remainder
const pageCount = Math.ceil(data.length/dataPerPage)

// function for page change set the page we are currently on
const changePage = ({selected}) => {
  setPageNumber(selected);
}
  return (
    <>
     <div className="header"> <h2>WELCOME TO FAKEDATA WORLD</h2></div>
    <div className="App">
      {fetchData}
      <Paginate
      previousLabel ={"Prev"}
      afterLabel ={"After"}
      pageCount ={pageCount}
      onPageChange={changePage}
      containerClassName={"paginationBttns"}
      previousLinkClassName={"previousBttn"}
      nextLinkClassName={"nextBttn"}
      disabledClassName={"paginationDisabled"}
      activeClassName={"paginationActive"}

      />
    </div>
    </>
  );
}

export default App;

It's CSS code

.header
{
  color: black;
  text-align: center;
  cursor: pointer;
  font-style: italic;
  font-family:cursive;
}

.App{
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  color: grey;
  background-color: black;
}

.card{

    border: 2px solid grey;
    border-radius: 10px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: cursive;
    width: 300px;
    height: 300px;
    margin: 20px;
}
.paginationBttns {
  width: 80%;
  height: 40px;
  list-style: none;
  display: flex;
  justify-content: center;
}

.paginationBttns a {
  padding: 10px;
  margin: 6px;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 2px solid grey;
  display: inline-block;
  color: black;
  cursor: pointer;
  background-color: white;
  text-align: center;
}

.paginationBttns a:hover {
  color: white;
  background-color: grey;
}

.paginationActive a {
  color: white;
  background-color: blue;
}

.paginationDisabled a {
  color: pink;
  background-color: pink;
}

Thank for reading :) will keep posting my new learnings!
Github

Blog

PAGINATION using react/Paginate

Kirti

Join Our Newsletter. No Spam, Only the good stuff.

Related