A custom React hook that helps in generating a pagination range based on the provided options

by React

usePagination Hook

The usePagination hook is a custom React hook that helps in generating a pagination range based on the provided options. It takes the following parameters:

interface PaginationOptions {
  totalCount: number;
  pageSize: number;
  siblingCount?: number;
  currentPage: number;
}
  • totalCount: The total number of items to be paginated.
  • pageSize: The number of items per page.
  • siblingCount (optional): The number of siblings to display on each side of the current page. Defaults to 1.
  • currentPage: The current page number.

The usePagination hook returns a pagination range array, which consists of either page numbers or “DOTS” placeholders. The generated pagination range is suitable for rendering pagination links or buttons.

import { usePagination } from "@src/hooks";

const MyComponent: React.FC = () => {
  const paginationRange = usePagination({
    totalCount: 100,
    pageSize: 10,
    siblingCount: 1,
    currentPage: 3,
  });

  return (
    <div>
      {paginationRange.map((pageNumber, index) => (
        <span key={index}>{pageNumber}</span>
      ))}
    </div>
  );
};

In the above example, paginationRange will contain an array representing the pagination links based on the provided options.

Pagination Component

The Pagination component is a reusable React component that utilizes the usePagination hook to render a pagination UI. It provides a set of navigation controls and displays the pagination range.

Props:

interface Props {
  onPageChange: (page: number) => void;
  totalCount: number;
  siblingCount?: number;
  currentPage: number;
  pageSize: number;
  className?: string;
}
  • onPageChange: A callback function that is invoked when a page is selected. It receives the selected page number as a parameter.
  • totalCount: The total number of items to be paginated.
  • siblingCount (optional): The number of siblings to display on each side of the current page. Defaults to 1.
  • currentPage: The current page number.
  • pageSize: The number of items per page.
  • className (optional): Additional CSS classes to be applied to the component.

Example usage:

import Pagination from "@src/components/Pagination";

const MyComponent: React.FC = () => {
  const handlePageChange = (page: number) => {
    // Perform logic to update the current page
  };

  return (
    <div>
      <Pagination
        onPageChange={handlePageChange}
        totalCount={100}
        siblingCount={1}
        currentPage={3}
        pageSize={10}
        className="my-pagination"
      />
    </div>
  );
};

In the above example, the Pagination component will render pagination links based on the provided props. When a page is selected, the handlePageChange callback will be triggered, allowing you to update the current page state.

Note: The Pagination component relies on the usePagination hook to generate the pagination range. Make sure to import the usePagination hook and provide it as a dependency in your project.

GitHub

View Github