Skip to main content

usePagination

The usePagination is a custom hook for pagination capability.

Submit feedback
Edit this page
github
View source code
import { usePagination } from '@uhg-abyss/web/hooks/usePagination';

usePagination props​

const pagination = usePagination({ pages: 10 });


const {
  canNextPage, //  Boolean to check if next page can be accessed
  canPreviousPage, // Boolean to check if previous page can be accessed
  goToPage, // Method to go to a certain page
  nextPage, // Method to go to next page
  lastPage, // Method to go to last page
  firstPage, // Method to go to first page
  pageCount, // Method to go to a certain page
  pageIndex, // Index of current page
  previousPage, // Method to go to a previous page
  setData, // Function to set active data
  state, // Includes currentPage, pageIndex, pageCount, rows, rowCount
} = pagination;

Methods​

previousPage, goToPage, and nextPage are methods to let pagination know how to navigate to certain pages.

Boolean checks​

canPreviousPage and canNextPage are used to check if the previous or next page is accessible given the current page index.

Step tracker use case​

Use the usePagination hook to handle the state and props of pagination. Methods returned include setData, goToPage, previousPage, and nextPage.

Find additional resources on how usePagination can be used to support Step Tracker in the Step Tracker page.

Table of Contents