How to use react-intl with yup and react-hook-forms?

Question

I am trying to use react-intl to create a localized validation schema with yup. However, all I could find is integration with i18n. I am using react-intl already as my main localization tool; therefore, I would like to stay with this tool. Is it possible to create a functioning localization with react-intl for yup? I am creating validation schemas in a separate files FYI.

Thanks for any tips

CodeSandbox Example of the issue

TLDR: I need to localize the validation message using. react-intl. At the moment I am not sure how to pass the localization id and get it translated in the render component.

Answer 1

You just only return the key of the translation message in the schema. and in your render method, you can only translate that key......

My solution:

export const schema = yup
  .object({
    simpleInput: yup.string().required("form.required.message")
  })
  .required();

Create util like:

function getTranslate(key) {
  return intl.formatMessage(key);
}

and last thing, for the TextField we just use:

<TextField
   {...field}
   error={!!error}
   helperText={error ? getTranslate(error) : null}
/>