useUrlState

A hook for managing state in the URL search parameters.

You will most likely want to use this hook with debounce since each url update triggers a page re render.

You should wrap the component that uses this hook with a Suspense.

Reading search parameters through useSearchParams() without a Suspense boundary will opt the entire page into client-side rendering. This could cause your page to be blank until the client-side JavaScript has loaded. Learn more

Open in

Installation

pnpm dlx shadcn@latest add https://mhl5.vercel.app/r/useUrlState.json

Usage

Basic Usage

const [value, setValue] = useUrlState("name");

With default value

You can pass a value or a function to the defaultValue option to set the state initial value.

const [value, setValue] = useUrlState("name", {
  defaultValue: () => "default value",
});

With history replace

const [value, setValue] = useUrlState("name", {
  history: "replace",
});