What is the best way to translate validation messages in a schema in React (with react-hook-form)

[Sti2nd]

I am using the react adapter and setting the current locale with the setLocale function from the context. I am also using a schema to validate a form and the schema was up until now defined outside of the React component.

const formSchema = z.object({
  name: z.string({ required_error: "Required" }),
});

export default function CreateWishList() {
  const { LL } = useContext(I18nContext);
  // useForm below comes from the react-hook-form library and it takes in a schema for validation of the form
  const { register } = useForm({ resolver: zodResolver(formSchema) });

  // Rest of component here, such as the form
}

As seen from the code above, the validation error message when name is empty string is hardcoded as "Required" and I want to translate it. useContext cannot be used outside of a component and this is where the problem is.

One way to solve it is to move the definition of the schema inside the React component:

export default function CreateWishList() {
  const { LL } = useContext(I18nContext);

  const formSchema = z.object({
    name: z.string({ required_error: LL.REQUIRED() })
  });

  const { register } = useForm({ resolver: zodResolver(formSchema) });

  // Rest of component here, such as the form
}

I find this to be a bit messy. The schema cannot be separated from the React component since it must be inside of it, and the useContext hook must be before the schema and the useForm hook after; thus splitting up the hook definitions too.

What would be really nice is to somehow access the currentLocale that was set with setLocale so I could translate the schema outside of a React component. Any ideas on how to write this in a good way?

[ivanhofer]

Hi @Sti2nd,
react is always a bit tricky when you want to share something outside the react-codebase.
I'm no react expert, so I don't think I can give you the "best" approach how to handle this.
I probably would use it like this:

import type { TranslationFunctions } from 'src/i18n/i18n-types'

const getFormSchema = (LL: TranslationFunctions) => z.object({
   name: z.string().min(1, LL.required()),
});

export default function CreateWishList() {
   const { LL } = useContext(I18nContext)
   
   let register

   useEffect(() => {
      register = useForm({ resolver: zodResolver(getFormSchema(LL)) }).register
   }, [LL])

   // Rest of component here, such as the form
}

I havent tested it, I just wrote it down from my mind, so maybe it isn 100% valid code and you have to tweak it a bit. I never have used react-hook-form, so maybe there are better approaches to this. But re-initalizing it like in the code above should probably work.

Let me know if it works!

[Sti2nd]

Hi @ivanhofer,
Wrapping the schema in a function that takes in LL: TranslationFunctions works great! I don't think the LL function will ever change(?) so I dropped the useEffect.

This is the code I ended up with (simplified):

import { I18nContext } from "i18n/i18n-react";
import { TranslationFunctions } from "i18n/i18n-types";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const getFormSchema = (LL: TranslationFunctions) => z.object({
  name: z.string({ required_error: LL.REQUIRED() })
});

export default function CreateWishList() {
  const { LL } = useContext(I18nContext);
  const formSchema = getFormSchema(LL);
  type FormValues = z.infer<typeof formSchema>;
  const { register } = useForm<FormValues>({ resolver: zodResolver(formSchema) });

  // Rest of component here, such as the form
}

I am inferring the type of the form from the schema, so that is why I prefer to store the schema in a variable.
Thank you for the reply!

A small note to others that will use the same tech: I noticed the Required text will not automatically change when changing language; one has to trigger validation again for the validation message to get updated. I don't know if this is normal when using schema with react-hook-form. This is not a problem for me so I won't investigate further. Maybe useEffect could fix it, but I am afraid that putting useForm inside useEffect will mess with the state in useForm.

[ivanhofer]

@Sti2nd you don't need useEffect if the language will not change.
You would probably need it if you have a locale-switch option displayed on the page e.g. on a "register new user" form. When the locale get's changed, LL will be updated and you should also update the formSchema via useEffect to display correct error messages.

[Sti2nd]

Updated the schema in my example because it was not translatable. Had previously written z.string() which would always use the default "required" text from the zod library, one must set the required_error option.

Another thing I found out is that one are not allowed to have a hook inside a hook, so the idea of putting useForm inside useEffect didn't work.

[ivanhofer]

@Sti2nd thanks for the update!