Skip to main content

useQueryParam

@toss/use-query-param is a library that helps you get query parameter values.

Install

npm install @toss/use-query-param
pnpm add @toss/use-query-param
yarn add @toss/use-query-param

API

useQueryParam(name, option)

useQueryParam(name, option);
optiondescriptionrequired
suspenseUse when using suspense.x
parserUsed to perform casting.x

If you do not add suspense:true, next/router may return undefined initially because the router is not ready.

Example

const type = useQueryParam('type');
// suspense
const type = useQueryParam('type', { suspense: true });
// suspense, parser
const type = useQueryParam('type', { suspense: true, parser: Number });

useQueryParams()

useQueryParams<T extends { [key: string]: string } = { [key: string]: string }>(): Partial<T>

Example

// One
const { foo } = useQueryParams<{ foo: string }>();

// Multiple
const { foo, toss } = useQueryParams<{ foo: string; toss: string }>();
  • https://toss.im/page -> undefined
  • https://toss.im/page?foo=bar -> { foo: bar }
  • https://toss.im/page?foo=bar&toss=core -> { foo: bar, toss: core }