@ngochuytu/react-pagination v1.0.1

React-pagination

ReactJS component to render a pagination.

Install and customize your own pagination component

Styling example here

Installation

Install @ngochuytu/react-pagination with npm

$ npm install @ngochuytu/react-pagination

Usage

PaginationExample.js

import React, { useState } from 'react';
import { Pagination } from '@ngochuytu/react-pagination';

const LoadingSpinner = (props) => {
  return (
    <div className="spinner-container">
      <div className="spinner"></div>
    </div>
  );
};

const PaginationExample = (props) => {
  const [isLoading, setIsLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const dataPerPage = 10;

  const listData = new Array(dataPerPage).fill(0).map((_, index) => {
    const rowNumber = index + (currentPage - 1) * dataPerPage;
    return (
      <div key={rowNumber}>
        <p>This is row number {rowNumber}</p>
      </div>
    );
  });

  const onPageChange = (activePage) => {
    //Fetch api here
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
      setCurrentPage(activePage);
    }, 1000);
  };

  return (
    <div className="pagination-example-container">
      <h1>This is page number {currentPage}</h1>
      {listData}
      <Pagination
        totalPages={100}
        activePage={1}
        breakButtonStep={2}
        pageRange={9}
        onPageChange={onPageChange}
        navigateToFirstPageButtonLabel="&#171;"
        navigateToLastPageButtonLabel="&#187;"
      />
      {isLoading && <LoadingSpinner />}
    </div>
  );
};

PaginationExample.style.css (This is only for spinner, you can skip this part)

/*Spinner Ref: https://codepen.io/hannibalza/pen/MWVvoJw*/
.spinner-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
}

.spinner {
  margin: auto;
  border: 2px solid #dbf2ff;
  width: 32px;
  height: 32px;
  display: inline-block;
  position: absolute;
  top: 45%;
  border-radius: 50%;
  border-right: 2px solid #018df7;
  text-align: center;
  animation-name: spin;
  animation-duration: 900ms;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67);
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

.pagination-example-container {
  position: relative;
}

Test it on CodeSandbox.

Props