6

PAGINATION using react/Paginate

 3 years ago
source link: https://dev.to/kirtisingh3008/pagination-using-reactpaginate-11o5
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Cover image for PAGINATION using react/Paginate
Kirti

Posted on Dec 16

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

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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK