useQueryParams

Parses and returns as an object the URL query params.

Installation

npx rabbithook@latest add use-query-params

Usage

App.tsx

import useQueryParams from "@/hooks/use-query-params";

function Component() {
  const params = useQueryParams();

  return (
    <div>{ JSON.stringify(params) }</div>
  );
}

Code

Typescript

use-query-params.ts

import { useEffect, useState } from 'react';

function useQueryParams<T extends Record<string, unknown>>() {
  const [queryParams, setQueryParams] = useState({} as T);

  useEffect(() => {
      const params = {};
      const searchParams = new URLSearchParams(window.location.search);
      for (const param of searchParams) {
        const typeSafeParam = params as Record<string, unknown>;
        typeSafeParam[param[0]] = param[1];
      }
      setQueryParams(params as T);
  }, []);

  return queryParams;
}

export default useQueryParams;

Javascript

use-query-params.js

import { useEffect, useState } from 'react';

function useQueryParams() {
  const [queryParams, setQueryParams] = useState({});

  useEffect(() => {
      const params = {};
      const searchParams = new URLSearchParams(window.location.search);
      for (let param of searchParams) {
          params[param[0]] = param[1];
      }
      setQueryParams(params);
  }, []);

  return queryParams;
}

export default useQueryParams;