Use Params

Invisible client components that report the current search params, pathname, or a numeric route param whenever they change.

Installation

bash

pnpm dlx shadcn@latest add @cs/use-params

tsx

import { UseSearchParams } from "@/components/cs/use-params"

tsx

<UseSearchParams onChange={(value) => console.log(value)} />

Invisible client component that reports the current search params string whenever it changes.

Name	Type	Default	Description
onChange *	(value: string) => void	-	-

Invisible client component that reports a numeric route param's value whenever it changes.

Name	Type	Default	Description
onChange *	(value: number) => void	-	-
paramId *	string \| null	-	-

Invisible client component that reports the current pathname whenever it changes.

Name	Type	Default	Description
onChange *	(value: string) => void	-	-