usePageParams

usePageParams reads page and size from the current URL (via React Router’s useSearchParams) and returns a small object you can pass directly into useData/useTypedData to populate page and size query parameters. Source: src/api/usePageParams.ts

Signature

export const usePageParams: (props?: { prefix?: string; defaultSize?: number }) => {
  paging: { page: number; size: number }
  prefix?: string
  paginationProperties: readonly (keyof ApiListResult<any>)[]
}

Behavior

Reads page and size from the URL.
Supports namespacing multiple paginators on a page via prefix:
- With prefix: 'comments' it reads page_comments and size_comments.
Defaults:
- page defaults to 1
- size defaults to defaultSize (if provided) or 25
Exposes paginationProperties, a readonly list of field names to include in shapes when working with ApiListResult<T> responses.

Examples

Basic list with paging

import { useData } from '@/api/fetchData'
import { usePageParams } from '@/api/usePageParams'

const { paging } = usePageParams()
const { resource } = useData<MyList>(httpClient, '/api/public/items', {
  ...paging, // adds page & size to the URL
})

With shapes for paginated responses

import { createShape } from '@/helpers/shape-helper'
import { paginationProperties, usePageParams } from '@/api/usePageParams'

const shape = createShape<ApiListResult<Item>>()([
  'Records.Id',
  'Records.Name',
  ...paginationProperties, // PageNumber, PageSize, TotalItems, etc.
])

const { paging } = usePageParams({ defaultSize: 10 })
const { resource } = useData<ApiListResult<Item>>(httpClient, '/api/public/items', {
  shape: shape.fields,
  ...paging,
})

Multiple independent paginators

// Parent page
const files = usePageParams({ prefix: 'files', defaultSize: 25 })
const comments = usePageParams({ prefix: 'comments', defaultSize: 5 })

// URLs managed independently: page_files/size_files and page_comments/size_comments

Notes

usePageParams only reads params; updating page/size is done via useSearchParams or Link navigation.
The hook is UI-agnostic and doesn’t render anything; it’s safe to use anywhere.

​usePageParams

​Signature

​Behavior

​Examples

​Basic list with paging

​With shapes for paginated responses

​Multiple independent paginators

​Notes

​See also