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