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

| Name | Type | Default | Description | | ------------------------------------ | :-------: | :-----: | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | totalPages | number | | (Required) The total number of pages | | activePage | number | | (Optional) The initial active page. The default value is 1. This value is uncontrolled, activePage then will be controlled by component's state | | pageRange | number | 7 | (Optional) (Min: 5) Range of pages displayed, exclude 2 navigation button to first and last page. | | breakButtonStep | number | 1 | (Optional) Step of break button. | | disableNavigationButtons | boolean | false | (Optional) Disable 2 navigation buttons. | | disableInitialOnPageChangeCall | boolean | false | (Optional) Disable initial onPageChange call. You might have to turn off Strict mode in development mode. | | containerClassName | string | | (Optional) ClassName of pagination's container | | pageButtonClassName | string | | (Optional) ClassName of each page button | | activePageButtonClassName | string | | (Optional) ClassName of active page button | | navigateToFirstPageButtonClassName | string | | (Optional) ClassName of navigate to first page button | | navigateToLastPageButtonClassName | string | | (Optional) ClassName of navigate to last page button | | breakButtonClassName | string | | (Optional) ClassName of break button | | navigateToFirstPageButtonLabel | ReactNode | "<<" | (Optional) Label for the navigate to first page button | | navigateToLastPageButtonLabel | ReactNode | ">>" | (Optional) Label for the navigate to last page button | | breakButtonLabel | ReactNode | "..." | (Optional) Label for the break button | | onPageChange | Function | | (Optional) Page change handler, receive activePage as an argument |