Skip to main content

​
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.

​
See also