diff --git a/src/App.tsx b/src/App.tsx index 0af51e1..ddae05d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -24,6 +24,7 @@ import SettingsRoute from "~/routes/SettingsRoute" import SignupRoute from "~/routes/SignupRoute" import VerifyEmailRoute from "~/routes/VerifyEmailRoute" +import I18nHandler from "./I18nHandler" import "./init-i18n" const router = createBrowserRouter([ @@ -111,6 +112,7 @@ export default function App(): ReactElement { + diff --git a/src/I18nHandler.tsx b/src/I18nHandler.tsx new file mode 100644 index 0000000..47058d2 --- /dev/null +++ b/src/I18nHandler.tsx @@ -0,0 +1,27 @@ +import * as yup from "yup" +import {useTranslation} from "react-i18next" +import {useEffect} from "react" +import {de} from "yup-locales" +import en from "yup/es/locale" + +const YUP_LOCALE_LANGUAGE_MAP: Record = { + "en-US": en, + "de-DE": de, +} + +export default function I18nHandler(): null { + const {i18n} = useTranslation() + + useEffect(() => { + i18n.on("languageChanged", newLanguage => { + // Update yup locale + const yupLocale = YUP_LOCALE_LANGUAGE_MAP[newLanguage] + + if (yupLocale) { + yup.setLocale(yupLocale) + } + }) + }, [i18n]) + + return null +} diff --git a/src/init-i18n.ts b/src/init-i18n.ts index b32ea17..f2275df 100644 --- a/src/init-i18n.ts +++ b/src/init-i18n.ts @@ -1,6 +1,4 @@ import {initReactI18next} from "react-i18next" -import {de} from "yup-locales" -import {setLocale} from "yup" // @ts-ignore // eslint-disable-next-line ordered-imports/ordered-imports import Cache from "i18next-localstorage-cache" @@ -25,5 +23,3 @@ i18n.use(HttpApi) escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape }, }) - -setLocale(de)