An Interest In:
Web News this Week
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
Some of Our Sources
- Smashing Magazine
- Six Revisions
- Creative Curio
- Inspiredology
- Web Designer Depot
- Naldz Graphics
- Web Design Ledger
- Line 25
- Stylized Web
- TechPowerUp
Help Webnuz
Referal links:
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-paginateif you use yarn
yarn add react-paginateIn 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 datafunction 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 remainderconst pageCount = Math.ceil(data.length/dataPerPage)// function for page change set the page we are currently onconst 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
Original Link: https://dev.to/kirtisingh3008/pagination-using-reactpaginate-11o5
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To