easy-pagination-1

Implement pagination in a easy way

First install by the below command

npm i easy-pagination-1

In the Pagination function requires three arguments

1. items
2. curentPage,
3. nomber of items to show per page

In return you will get three variavle as below. const {viewItems, paginationList, paginationListView} = Pagination(data, currentPage,showPerPage);

---

Example

import './App.css'; 
import React, { useState, useEffect } from 'react'; 
import { Pagination } from 'easy-pagination-1'; 

const App = () => { 
  const showPerPage = 5; 
  const [currentPage, setCurrentPage] = useState(1); 
  const [data, setData] = useState([]); 

useEffect(() => { 

    fetch(`https://jsonplaceholder.typicode.com/posts`) 
        .then((data) => data.json()) 
        .then((res) => setData(res)) 
        .catch((err) => console.log(err)); 

}, []) 

// cut the below line and paste it to your app
const {viewItems, paginationList, paginationListView} = Pagination(data, currentPage,showPerPage); 

return ( 
    <> 
        <table > 
            <thead> 
                <tr> 
                    <th>#</th> 
                    <th>Title</th> 
                    <th>Description</th> 
                </tr> 
            </thead> 
            <tbody> 
                {viewItems.map((data) => ( 
                    <tr key={data.id} > 
                        <th>{data.id}</th> 
                        <td>{data.title}</td> 
                        <td>{data.body}</td> 
                    </tr> 
                ))} 
            </tbody> 
        </table> 

        {/* cut the below ul tag and past it after table to paginate your app */}
        <ul className='ulStyle'> 
            {currentPage > 1 && ( 
                <li 
                    onClick={() => setCurrentPage(currentPage - 1)} 
                    className='prevNextBtn'  
                >  
                    <a>Prev</a>  
                </li> 
            )} 
            {paginationListView.map((paginateData, index) => ( 
                <li 
                    onClick={() => typeof paginateData == 'number' && setCurrentPage(paginateData)} 
                    key={index} 
                    className = {paginateData==currentPage ? 'activeListCssStyle' : 'listStyle'} 
                > 
                    <a>{paginateData}</a> 
                </li> 
            ))} 

            {paginationList.length !== currentPage && (
                <li
                onClick={() => setCurrentPage(currentPage + 1)}
                    className='prevNextBtn'
                >
                    <a >Next</a>
                </li>
            )}
        </ul>
    </>
)
}

export default App

***
paste below css style in App.css file
***

.ulStyle {
  list-style: none;
  display: flex;
  justify-content: center
}

.listStyle {
  margin: 0px 10px;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: goldenRod;
  color: #fff
}

.activeListCssStyle {
  margin: 0px 10px;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #af320b;
  color: #fff
}

.prevNextBtn {
  margin: 0px 10px;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: gray;
  color: #fff
}

Demo codesandbox