usePagination

Usage

import { usePagination } from "@govtechmy/myds-react/hooks";
 
const { visiblePages, max } = usePagination({ count: 10, page: 1, limit: 10, maxDisplay: 4 });

Source

Example

Building a Self Assembled Pagination Component

The usePagination hook provides the handlers required to manage pagination state and actions for list and tables. This can be seen in the Pagination Configuration of the Pagination documentation.

Example

import { usePagination } from "@govtechmy/myds-react/hooks";
 
//... inside your component
const { visiblePages } = usePagination();
 
// Self assembled Pagination component
<Pagination ref={ref} type={type} {...props}>
  <PaginationContent>
    <PaginationItem>{previous || <PaginationPrevious />}</PaginationItem>
    {visiblePages.map((page, index) => (
      <PaginationItem key={page}>
        {page === "..." ? (
          <PaginationEllipsis />
        ) : (
          typeof page === "number" && <PaginationNumber number={page} />
        )}
      </PaginationItem>
    ))}
    <PaginationItem>{next || <PaginationNext />}</PaginationItem>
  </PaginationContent>
</Pagination>;

API

usePagination (Arguments)

Prop	Type	Default
`count`	`Array<number \| "...">`	-
`page`	`number`	-
`limit`	`number`	-
`displayMax`	`number`	-

usePagination (Return)

Prop	Type	Default
`visiblePages`	`Array<number \| "...">`	-
`max`	`number`	-

MYDS

usePagination

Usage

Example

API

usePagination (Arguments)

usePagination (Return)

On this page