usePagination documentation

The usePagination hook provides pagination functionality for displaying a limited number of items per page and navigating between them.

Type

Hooks

import

import { usePagination } from '@pillar-ui/hooks'
Go To use-pagination Source CodeIssuesdiscussions

Table of Contents

usePagination

Introduction

The usePagination hook provides pagination functionality for displaying a limited number of items per page and navigating between them.

Why usePagination

Paginating large sets of data is a common requirement in many web applications. usePagination provides a simple and flexible way to implement pagination functionality, allowing users to easily navigate through pages of data.

Parameters

usePagination accepts an object with the following properties:

  • currentPage (optional): the current page number (default: 1).
  • totalPages: the total number of pages.
  • maxPerView (optional): the maximum number of page links to show at once (default: 5).

Return Value

usePagination returns an object with the following properties:

  • range: an array of numbers representing the page links to display.
  • currentStep: the current page number.
  • hasNext: a boolean indicating whether there is a next page.
  • hasPrevious: a boolean indicating whether there is a previous page.
  • next: a function that navigates to the next page.
  • previous: a function that navigates to the previous page.
  • goTo: a function that navigates to a specific page.##

Installation

You can install @pillar-ui/hooks using either npm or yarn.

# npm
npm install @pillar-ui/hooks

# yarn
yarn add @pillar-ui/hooks

Usage

import { usePagination } from '@pillar-ui/hooks'

function Pagination() {
  const { range, currentStep, hasNext, hasPrevious, next, previous, goTo } = usePagination({
    currentPage: 1,
    totalPages: 10,
    maxPerView: 5,
  })

  return (
    <div>
      <nav>
        <ul>
          <li>
            <button onClick={previous} disabled={!hasPrevious}>
              Prev
            </button>
          </li>
          {range.map((step) => (
            <li key={step}>
              {step === '.' ? (
                <span>&hellip;</span>
              ) : (
                <button onClick={()=> goTo(step)} disabled={step= currentStep}>
                  {step}
                </button>
              )}
            </li>
          ))}
          <li>
            <button onClick={next} disabled={!hasNext}>
              Next
            </button>
          </li>
        </ul>
      </nav>
      <p>Current Page: {currentStep}</p>
    </div>
  )
}

Implementation details

usePagination internally uses the useStepper hook to determine the current step and provide navigation functions.

The getRange function returns an array of page links to display based on the current step, the total number of pages, and the maximum number of page links to show at once.

TypeScript Support

usePagination is written in TypeScript and includes type definitions for its parameters and return value.

Troubleshooting

If you are experiencing issues with usePagination, ensure that you are passing in the correct values for the totalPages and maxPerView parameters. Also, make sure that you are using the range, currentStep, and navigation functions correctly in your component.

Conclusion

usePagination is a flexible and easy-to-use hook that provides pagination functionality for your React applications. It allows users to easily navigate through pages of data and is fully customizable to fit your specific needs.