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

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.

CodePudding user response：

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}
/>