@void-snippets/react

usePagination

Page/limit query params with resetPagination helper.

#What it does

Manages page and limit state and produces a queryParams object ready to spread into useList. Also handles the common pattern of resetting to page 1 when a filter changes.

#Signature

typescript

function usePagination(initialPage?: number, initialLimit?: number): {
  page:               number;
  limit:              number;
  queryParams:        { page: number; limit: number };
  onPaginationChange: (page: number, limit: number) => void;
  resetPagination:    () => void;
  setPage:            (page: number) => void;
  setLimit:           (limit: number) => void;
}

#Parameters

Parameter	Default	Description
`initialPage`	`1`	Starting page number.
`initialLimit`	`10`	Starting page size.

#Example

tsx

function ContactsPage() {
  const [search, setSearch] = useState('');
  const { queryParams, onPaginationChange, resetPagination } = usePagination(1, 25);

  const { list, pagination } = contactHooks.useList({ ...queryParams, q: search });

  const handleSearch = (value: string) => {
    setSearch(value);
    resetPagination(); // back to page 1 when the filter changes
  };

  return (
    <>
      <SearchInput value={search} onChange={handleSearch} />
      <ContactsTable contacts={list} />
      <Pagination
        currentPage={pagination.page}
        pageSize={pagination.limit}
        total={pagination.totalDocuments}
        onChange={onPaginationChange}
      />
    </>
  );
}