React-hook-form next-I18next ZodResolver Typescript

[tonyjara]

Hi, so I've been struggling with validation and i18next . I like having my form validations on a separate file, and for some reason the 't' from the useTranslation hook does not expose a generic type that I can easily pass down on a validation function. So anyways, this is how I solved that problem.

When using I18next with typescript we have to create a file with our imported namespaces.

import 'i18next';
import type common from '../public/locales/es/common.json';
import type validation from '../public/locales/es/validation.json';

export interface I18nNamespaces {
  common: typeof common;
  validation: typeof validation;
}

declare module 'i18next' {
  interface CustomTypeOptions {
    defaultNS: 'common';
    resources: I18nNamespaces;
  }
}

Since we know that 't' takes strings concatenated strings with a semicolon, we can create a type with generics that takes the I18nNamespaces.

type Permutations<
  T extends keyof I18nNamespaces,
  U extends string = T
> = T extends any ? `${T}:${U}` : never;

type joined<T extends keyof I18nNamespaces> = Permutations<
  T,
  keyof I18nNamespaces[T] & string
>;

export type CustomTFunction<T extends keyof I18nNamespaces> = (
  x: joined<T>
) => any;

Now we can pass the 't' to our resolver function:

const { t } = useTranslation([ 'common', 'validation']);
  const {
    handleSubmit,
    control,
    formState: { errors, isSubmitting },
  } = useForm<signinData>({
    defaultValues: defaultSigninData,
    resolver: zodResolver(signinValidation(t)), //here we turn our resolver into a function
  });

And now our validation file can has support for the 't' strings:

export const signinValidation = (t: CustomTFunction<'validation'>) =>
  z.object({
    email: z
      .string({ required_error: t('validation:invalidEmail') })
      .email(t('validation:invalidEmail')),
    password: z
      .string({ required_error: 'Favor ingrese su contraseña.' })
      .min(6, 'Debe tener al menos 6 caractéres.'),
  });

export type signinData = z.infer<ReturnType<typeof signinValidation>>;
export const defaultSigninData: signinData = { email: '', password: '' };

That's it, you can also use this new type to use 't' as a parameter anywhere else you like. Leaving this here in hopes it helps someone.

[bluebill1049]

Love it, thanks very much for sharing! we need more of those.

[alejandro-almeida-improving]

thanks a lot

[yezhi780625]

Hi @tonyjara,

Thanks for the great work on this!
I'm trying to use this with the following dependencies:

"i18next": "^24.2.2",
"react-i18next": "^15.4.1",
"zod": "^3.24.2",
"@hookform/resolvers": "^4.1.3",
"react-hook-form": "^7.54.2"

However, I wasn't able to get it working correctly. Here's a simplified version of my schema and how I'm using react-hook-form:

Schema definition:

const createLoginSchema = (t: TFunction) =>
  z.object({
    username: z
      .string({
        required_error: t("login:username.validation.required"),
      })
      .min(1, {
        message: t("login:username.validation.required"),
      }),
    password: z
      .string({
        required_error: t("login:password.validation.required"),
      })
      .min(1, {
        message: t("login:password.validation.required"),
      }),
  });

Form setup:

function Login() {
  const { t } = useTranslate(["login"]);

  type LoginFormValues = z.infer<ReturnType<typeof createLoginSchema>>;

  const { register, handleSubmit, formState } = useForm<LoginFormValues>({
    resolver: zodResolver(createLoginSchema(t)),
    defaultValues: {
      username: "",
      password: "",
    },
    mode: "onChange",
  });
}

Just wondering—does this approach still work with the latest versions listed above? Or is there an updated pattern recommended for using i18n with Zod and react-hook-form?

Thanks in advance!