Search params typed with `zod` lib

useTypedParams.tsx

import { useMemo } from 'react';
import { useSearchParams } from 'react-router-dom';
import { z } from 'zod';

export const useTypedParams = <T extends z.SomeZodObject>(zodSchema: T) => {
  type TParams = z.infer<T>;

  const [urlSearchParams, setUrlSearchParams] = useSearchParams();

  const searchParams = useMemo<TParams>(() => {
    const parsedParams = Object.fromEntries(urlSearchParams);

    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
    return zodSchema.parse(parsedParams);
  }, [zodSchema, urlSearchParams]);

  const clearSearchParams = () => {
    setUrlSearchParams({});
  };

  const setSearchParam = <K extends keyof TParams>(key: K, newValue: TParams[K]) => {
    setUrlSearchParams({
      ...searchParams,
      [key]: newValue,
    });
  };

  const setSearchParams = (newParams: TParams) => {
    setUrlSearchParams(newParams);
  };

  return {
    searchParams,
    setSearchParams,
    setSearchParam,
    clearSearchParams,
  } as const;
};