diff --git a/package-lock.json b/package-lock.json index 835edf1..4abfae8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "fast-xml-parser": "^5.2.5", "formik": "^2.4.6", "i18next": "^25.3.2", + "i18next-browser-languagedetector": "^8.2.0", "i18next-http-backend": "^3.0.2", "jimp": "^0.22.12", "js-quantities": "^1.8.0", @@ -7134,6 +7135,15 @@ } } }, + "node_modules/i18next-browser-languagedetector": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.0.tgz", + "integrity": "sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.23.2" + } + }, "node_modules/i18next-http-backend": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-3.0.2.tgz", diff --git a/package.json b/package.json index 494c547..6c3c93c 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "fast-xml-parser": "^5.2.5", "formik": "^2.4.6", "i18next": "^25.3.2", + "i18next-browser-languagedetector": "^8.2.0", "i18next-http-backend": "^3.0.2", "jimp": "^0.22.12", "js-quantities": "^1.8.0", diff --git a/src/i18n/index.ts b/src/i18n/index.ts index 0f6a430..fbec4a1 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -1,6 +1,7 @@ import i18n, { Namespace, ParseKeys } from 'i18next'; import { initReactI18next } from 'react-i18next'; import Backend from 'i18next-http-backend'; +import LanguageDetector from 'i18next-browser-languagedetector'; export const validNamespaces = [ 'string', @@ -24,15 +25,20 @@ export type FullI18nKey = { i18n .use(Backend) + .use(LanguageDetector) .use(initReactI18next) .init({ - lng: localStorage.getItem('lang') || 'en', + supportedLngs: ['en', 'de', 'es', 'fr', 'pt', 'ja', 'hi', 'nl', 'ru', 'zh'], fallbackLng: 'en', interpolation: { escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape }, backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' + }, + detection: { + lookupLocalStorage: 'lang', + caches: ['localStorage'] // cache the detected lang back to localStorage } });