React : Make your own pagination

hello community,

today i'll show you how to make your own pagination without using any package.

let's get started

first thing we need to do is to create a react app

npx create-react-app make-pagination
cd make-pagination //navigate to our project
code . //open our react app with vscode

let's say that we want to fetch the data of our users and for that
i'll use Mockaroo to generate a dummy data.
in src folder we create a new file data.js this file will contain the users dummy data.

//data.js
export const Data = [
{"id":1,"name":"Anna-maria","email":"[e-mail]"},
{"id":2,"name":"Kenyon","email":"[e-mail]"},
{"id":3,"name":"Twila","email":"[e-mail]"},
{"id":4,"name":"Rudd","email":"[e-mail]"},
{"id":5,"name":"Robby","email":"[e-mail]"},
{"id":6,"name":"Viviyan","email":"[e-mail]"},
{"id":7,"name":"Gabriello","email":"[e-mail]"},
{"id":8,"name":"Carter","email":"[e-mail]"},
{"id":9,"name":"Berna","email":"[e-mail]"},
{"id":10,"name":"Marlow","email":"[e-mail]"},
{"id":11,"name":"Corella","email":"[e-mail]"},
{"id":12,"name":"Cherida","email":"[e-mail]"},
{"id":13,"name":"Zackariah","email":"[e-mail]"},
{"id":14,"name":"Orelee","email":"[e-mail]"},
{"id":15,"name":"Alonzo","email":"[e-mail]"},
{"id":16,"name":"Vonnie","email":"[e-mail]"},
{"id":17,"name":"Weidar","email":"[e-mail]"},
{"id":18,"name":"Cyb","email":"[e-mail]"},
{"id":19,"name":"Melisent","email":"[e-mail]"},
{"id":20,"name":"Darbee","email":"[e-mail]"}
]

now let's fetch these users without pagination
first we create a "user" folder then we create two files user.jsx component and user.css cuz we need some basic css style.

//user.jsx
import React from 'react';
import './user.css';

const User = ({name, email}) => {
    return ( 
        <div className='user'>
            Name : {name} <br/>
            Email : {email}
        </div>
     );
}

export default User;

/* user.css */
.user{
    padding: 10px;
    margin:10px auto;
    width:50%;
    border : 1px solid #eee;
}

in the "App.js" component we import user.jsx and Data.js and fetch our data.

//App.js
import React from 'react';
import './App.css';
import { Data } from './data';
import User from './user/user';

function App() {
  return (
    <div className="App">
    <h1>ALL USERS</h1>
      {
        Data.map(user => <User key={user.id}
                               name={user.name}
                               email={user.email} />
        )
      }
    </div>
  );
}

export default App;

the result

20 users in the same page is a little bit annoying in this case we need to use pagination.

Create the pagination component

1- create pagination folder contain two files pagination.jsx and pagination.css.

first we need to install a lodash package

npm i --save lodash

//pagination.jsx
import React from 'react';
import _ from 'lodash';
import './pagination.css';

const Pagination = (props) => {

    const { itemsCount, pageSize, currentPage, onPageChange } = props;
    const pageCount = Math.ceil(itemsCount / pageSize);
    if (pageCount === 1) return null;
    const pages = _.range(1, pageCount + 1);

    return (
        <div className="pagination">
            {pages.map(page => (
                <div href={null} key={page}
                    onClick={() => onPageChange(page)}
                    className={page === currentPage ? 'active' : 'page-item'}>
                    {page}
                </div>
            ))}
        </div>
    )
}

export default Pagination;

itemsCount, pageSize, currentPage and onPageChange are props we will pass them when we implement the pagination in the App.js component.

/* pagination.css */
.pagination {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination div {
  color: white;
  float: left;
  padding: 8px 16px;
  display: block;
  text-decoration: none;
  transition: background-color 0.3s;
  cursor: pointer;

}

/* Style the active/current link */
.pagination div.active {
  background-color: #05aff1;
}

/* Add a grey background color on mouse-over */
.pagination div:not(.active) {
  background-color: #444444;
}

2- Create a javascript logic that will slice our dummy data

in the src folder we create a paginate.js file

import _ from 'lodash';

export function paginate(items, pageNumber, pageSize){
   const startIndex = (pageNumber - 1) * pageSize;

   return _(items)
            .slice(startIndex)
            .take(pageSize)
            .value();
}

this function take all data (items), pageNumber (the number of page we want to go if we have 20 users and and we want 4 users in each page 20/4=5pages if we want to see the users in page 3 we start slice our data from index: (3-1)*4=8), the pageSize (number of users in each page) and return new table contain a pageSize elements.

3- Implement the pagination

in App.js component :
import paginate function from paginate.js and import useState hook then

  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 4;

  const handlePageChange = page => {
    setCurrentPage(page);
  }

  const getPageData = () => {

    const paginationData = paginate(Data, currentPage, pageSize);
    return { totalCount: Data.length, data: paginationData }
  }

  const { totalCount, data } = getPageData();

now let's import pagination component and see the result

const { totalCount, data } = getPageData();
  return (
    <div className="App">
      <h1>ALL USERS</h1>
      {
        data.map(user => <User key={user.id}
          name={user.name}
          email={user.email} />
        )
      }
      <Pagination
        itemsCount={totalCount}
        pageSize={pageSize}
        currentPage={currentPage}
        onPageChange={handlePageChange} />
        page {currentPage} of { totalCount / pageSize }
    </div>

the final result

I hope you enjoyed this blog.