fn
useUrlSearchParams
v0.0.15testeddemoReactive `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.
Examples
ts
const params = useUrlSearchParams('history');
params.foo = 'bar'; // -> ?foo=barts
// Hash mode with seeded values and push-history writes
const params = useUrlSearchParams('hash', {
initialValue: { tab: 'home' },
writeMode: 'push',
});ts
// Repeated keys decode to arrays
const params = useUrlSearchParams<{ ids: string[] }>('history');
params.ids = ['1', '2']; // -> ?ids=1&ids=2Demo
Loading demo…
Signature
ts
export function useUrlSearchParams<T extends Record<string, any> = UrlParams>(
mode: UrlSearchParamsMode = 'history',
options: UseUrlSearchParamsOptions<T> ={ ... }Type Parameters
Textends Record<string, any>= UrlParamsParameters
| Parameter | Type | Description |
|---|---|---|
mode? | UrlSearchParamsMode | Where the params live: `history` (`?a=1`), `hash` (`#/path?a=1`), or `hash-params` (`#a=1`) |
options? | UseUrlSearchParamsOptions<T> | Behavior options |
Returns
TA reactive object mirroring the URL params; mutate it to update the URL