useUrlSearchParams

v0.0.14testeddemo

Reactive URLSearchParams exposed as a plain reactive object. Reads from and (optionally) writes back to the URL using the history, hash, or hash-params location source. Listens for popstate/hashchange with passive listeners and pauses its own writer while syncing to avoid feedback loops. SSR-safe: returns the seeded reactive object when no window is available.

Source Tests

Examples

const params = useUrlSearchParams('history');
params.foo = 'bar'; // -> ?foo=bar

// Hash mode with seeded values and push-history writes
const params = useUrlSearchParams('hash', {
  initialValue: { tab: 'home' },
  writeMode: 'push',
});

// Repeated keys decode to arrays
const params = useUrlSearchParams<{ ids: string[] }>('history');
params.ids = ['1', '2']; // -> ?ids=1&ids=2

Demo

Loading demo…

Signature

export function useUrlSearchParams<T extends Record<string, any> = UrlParams>(
  mode: UrlSearchParamsMode = 'history',
  options: UseUrlSearchParamsOptions<T> ={ ... }

Type Parameters

Textends Record<string, any>= UrlParams

Parameters

Parameter	Type	Default	Description
`mode`?	`UrlSearchParamsMode`	`'history'`	Where the params live: `history` (`?a=1`), `hash` (`#/path?a=1`), or `hash-params` (`#a=1`)
`options`?	`UseUrlSearchParamsOptions<T>`	`{}`	Behavior options

Returns

UseUrlSearchParamsReturn<T>A reactive object mirroring the URL params; mutate it to update the URL