usePagination

Hook usePagination menyediakan pengendali yang diperlukan untuk menguruskan keadaan dan tindakan penomboran untuk komponen senarai dan jadual. Ini boleh dilihat dalam Konfigurasi Penomboran dokumentasi Penomboran.

Contoh

import { usePagination } from "@govtechmy/myds-react/hooks";
 
//... dalam komponen anda
const { visiblePages } = usePagination();
 
// Komponen Penomboran yang dibina sendiri
<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 (Argumen)

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

usePagination (Pulangan)

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

MYDS

usePagination

Penggunaan

Contoh

Membina Komponen Penomboran Tersuai

API

usePagination (Argumen)

usePagination (Pulangan)

Di halaman ini