Kobana UI
GitHub

usePagination

Hook para paginação server-side.

Instalação

npx @kobana/ui add use-pagination

Importação

import { usePagination } from "@/hooks/use-pagination"

API

const { page, perPage, setPage, setPerPage, offset } = usePagination({
  defaultPage: 1,
  defaultPerPage: 20,
})

Options

OpçãoTipoDefaultDescrição
defaultPagenumber1Página inicial
defaultPerPagenumber20Itens por página

Return

PropriedadeTipoDescrição
pagenumberPágina atual (1-indexed)
perPagenumberItens por página
setPage(page) => voidMuda a página
setPerPage(perPage) => voidMuda items/página (reseta page=1)
offsetnumberOffset calculado: (page - 1) * perPage

Uso

const pagination = usePagination({ defaultPerPage: 10 })

const { data } = useQuery({
  queryKey: ["charges", pagination.page, pagination.perPage],
  queryFn: () => api.charges.list({
    page: pagination.page,
    per_page: pagination.perPage,
  }),
})

On this page