usePagination

Manages pagination state (current page, page size, total pages) and exposes helper navigation methods.

Import

import { usePagination } from "@xocialive/ui-components/hooks";
import type { PaginationParams, UsePaginationProps } from "@xocialive/ui-components/hooks";

Usage

function UserListPage() {
  const pagination = usePagination({ initialPage: 1, initialPageSize: 20 });

  const { data } = useQuery({
    queryKey: ["users", pagination.page, pagination.pageSize],
    queryFn: () => api.getUsers({ page: pagination.page, size: pagination.pageSize }),
  });

  return (
    <DataViewContainer
      data={data?.items ?? []}
      total={data?.total ?? 0}
      pagination={pagination.params}
      onPaginationChange={pagination.setParams}
    />
  );
}

API

const {
  page, // Current page number (1-indexed)
  pageSize, // Items per page
  totalPages, // Computed from total + pageSize
  params, // { page, pageSize } — convenient object for API calls
  setPage, // (page: number) => void
  setPageSize, // (size: number) => void
  setParams, // (params: PaginationParams) => void
  setTotal, // (total: number) => void — updates totalPages
  goNext, // () => void
  goPrev, // () => void
  goToFirst, // () => void
  goToLast, // () => void
  canGoNext, // boolean
  canGoPrev, // boolean
} = usePagination(props);

UsePaginationProps

Prop	Type	Default	Description
initialPage	number	1	Starting page
initialPageSize	number	10	Starting page size
total	number	0	Total record count

PaginationParams

type PaginationParams = {
  page: number;
  pageSize: number;
};