본문으로 건너뛰기

useQueryParam

@toss/use-query-param 는 쿼리 파라미터 값을 가져오는데 도움이 되는 라이브러리입니다.

설치​

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);
option설명필수 여부
suspensesuspense를 사용할 때 사용합니다.x
parser형변환을 할 때 사용합니다.x

suspense:true를 추가하지 않을 경우 next/router의 Router가 준비되지 않아 초기에 undefined를 리턴할 수 있습니다.

사용 예시​

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>

사용 예시​

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

// 다수
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 }