add auto detect for languages

Author: rubenlangius

package-lock.json

@@ -17,6 +17,7 @@
     "@rjsf/validator-ajv8": "^5.22.1",
     "bootstrap": "^4.6.2",
     "i18next": "^23.16.5",
+    "i18next-browser-languagedetector": "^8.0.0",
     "react": "^18.3.1",
     "react-bootstrap": "^1.6.8",
     "react-copy-to-clipboard": "^5.1.0",

package.json

@@ -2,20 +2,33 @@ import i18next from "i18next";
 import { initReactI18next } from "react-i18next";
 import enTranslation from "./en/translation.json";
 import nlTranslation from "./nl/translation.json";
+import LanguageDetector from "i18next-browser-languagedetector";
 
-i18next.use(initReactI18next).init({
-  lng: "en", // if you're using a language detector, do not define the lng option
-  fallbackLng: "en",
-  debug: true,
-  resources: {
-    en: {
-      translation: enTranslation,
+i18next
+  .use(LanguageDetector) // Add the language detector
+  .use(initReactI18next)
+  .init({
+    fallbackLng: "en", // Default language if detection fails
+    debug: true,
+    resources: {
+      en: {
+        translation: enTranslation,
+      },
+      nl: {
+        translation: nlTranslation,
+      },
     },
-    nl: {
-      translation: nlTranslation,
+    detection: {
+      // Prioritize localStorage over browser language
+      order: [
+        "localStorage",
+        "querystring",
+        "htmlTag",
+        "navigator",
+        "path",
+        "subdomain",
+      ],
+      caches: ["localStorage"],
     },
-  },
-  // if you see an error like: "Argument of type 'DefaultTFuncReturn' is not assignable to parameter of type xyz"
-  // set returnNull to false (and also in the i18next.d.ts options)
-  returnNull: false,
-});
+    returnNull: false,
+  });

src/i18n/config.ts

@@ -1122,6 +1122,13 @@ html-parse-stringify@^3.0.1:
   dependencies:
     void-elements "3.1.0"
 
+i18next-browser-languagedetector@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.0.tgz"
+  integrity sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
 i18next-resources-for-ts@^1.5.0:
   version "1.5.0"
   resolved "https://registry.npmjs.org/i18next-resources-for-ts/-/i18next-resources-for-ts-1.5.0.tgz"