react-component-form/example/hooks/useFormTranslation.ts

import useTranslation from "next-translate/useTranslation"
import type { Error } from "react-component-form"

const knownErrorKeywords = ["minLength", "maxLength", "format"]

const getErrorTranslationKey = (error: Error): string => {
  if (knownErrorKeywords.includes(error?.keyword)) {
    if (
      error.keyword === "minLength" &&
      typeof error.data === "string" &&
      error.data.length === 0
    ) {
      return "common:required"
    }
    if (error.keyword === "format") {
      if (error.params["format"] === "email") {
        return "common:invalid-email"
      }
      return "common:invalid"
    }
    return `common:${error.keyword}`
  }
  return "common:invalid"
}

export const useFormTranslation = () => {
  const { t } = useTranslation()

  const getErrorTranslation = (
    error: Error | undefined,
  ): string | undefined => {
    if (error != null) {
      return t(getErrorTranslationKey(error)).replace(
        "{expected}",
        error?.params?.["limit"],
      )
    }
    return undefined
  }

  const getFirstErrorTranslation = (
    errors: Error[] | undefined,
  ): string | undefined => {
    if (errors != null) {
      return getErrorTranslation(errors[0])
    }
    return undefined
  }

  return { getFirstErrorTranslation, getErrorTranslation }
}