DEV Community

Cover image for PAGINATION using react/Paginate
Kirti
Kirti

Posted on

10 5

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
Enter fullscreen mode Exit fullscreen mode

if you use yarn

yarn add react-paginate
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

WebsiteView
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;

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Image description

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (2)

Collapse
 
kirtisingh3008 profile image
Kirti β€’

Thank you for the appreciation :)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

πŸ‘₯ Ideal for solo developers, teams, and cross-company projects

Learn more

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay