> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nexudus.com/llms.txt
> Use this file to discover all available pages before exploring further.

# usePageParams

> Derive page and size from the URL query string with optional namespacing/prefix and share pagination field shapes.

# 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

```ts theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
// 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

* [useData](/developers/data/use-data)
* [useTypedData](/developers/data/use-typed-data)
* [createShape](/developers/data/create-shape)