alepha@docs:~/docs/reference/react-hooks$
cat useQueryParams.md | pretty
1 min read
Last commit:

#useQueryParams

#Import

typescript 
1import { useQueryParams } from "alepha/react/router";

#Overview

Hook to manage query parameters in the URL using a defined schema.

Two storage formats are supported via {@link UseQueryParamsHookOptions.format}:

  • "base64" (default) packs the whole object into a single opaque param (named by key, default q) — e.g. ?q=eyJ0YWIiOiJzZWN1cml0eSJ9.
  • "querystring" spreads each schema field across its own readable param — e.g. ?tab=security. In this mode key is ignored.

By default the URL is updated with replaceState (no new history entry). Pass push: true to add a history entry instead, so the browser back button steps back through previous values.

#Examples

const [params, setParams] = useQueryParams( z.object({ tab: z.string().optional() }), { format: "querystring" }, ); // params.tab reads from ?tab=…; setParams({ tab: "security" }) writes it.