Next.js use-params-with-type-conversion hook

nextjs-use-params-with-type-conversion.ts

export const useParamsWithTypeConversion = <
	T extends { [key: string]: (v: string | string[]) => number | boolean | string }
>(
	conversions: T
) => {
	const params = useParams()

	const convertedParams = {} as { [K in keyof T]: ReturnType<T[K]> }

	for (const [key, conversion] of Object.entries(conversions)) {
		const paramValue = params[key as keyof typeof params]
		convertedParams[key as keyof T] = conversion(paramValue) as ReturnType<T[typeof key]>
	}

	return convertedParams
}

export default useParamsWithTypeConversion

tsr-use-params-with-type-conversion.ts

import { useParams } from "@tanstack/react-router";

export const useParamsWithTypeConversion = <
  T extends Record<string, (v: string) => number | boolean | string>,
>(
  conversions: T,
) => {
  const params = useParams({ strict: false });

  return Object.entries(conversions).reduce(
    (convertedParams, [key, conversion]) => {
      const paramValue = params?.[key as keyof typeof params];
      if (paramValue) {
        convertedParams[key as keyof T] = conversion(paramValue) as ReturnType<
          T[typeof key]
        >;
      }
      return convertedParams;
    },
    {} as { [K in keyof T]: ReturnType<T[K]> },
  );
};

export default useParamsWithTypeConversion;

usage.ts

const {
		id, // type: number
		foo, // type: boolean
	} = useParamsWithTypeConversion({
		id: (val) => +val,
		foo: (val) => (val === 'true' ? true : false),
	})