Init i18n

package.json

@@ -6,8 +6,11 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "i18next": "^19.9.1",
+    "i18next-browser-languagedetector": "^6.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-i18next": "^11.8.9",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

src/locales/browserDetector.js

@@ -0,0 +1,16 @@
+export default {
+    name: 'browser',
+
+    lookup(options) {
+        // options -> are passed in options
+        var userLang = navigator.language || navigator.userLanguage;
+        return userLang;
+    },
+
+    cacheUserLanguage(lng, options) {
+        // options -> are passed in options
+        // lng -> current language, will be called after init and on changeLanguage
+
+        // store it
+    }
+};

src/locales/en-us.json

@@ -0,0 +1 @@
+{}

src/locales/i18n.js

@@ -0,0 +1,55 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from 'i18next-browser-languagedetector';
+import browserDetector from './browserDetector'
+
+import en_us from './en-us'
+import zh_cn from './zh-cn'
+
+const languageDetector = new LanguageDetector();
+languageDetector.addDetector(browserDetector);
+
+
+
+// the translations
+// (tip move them in a JSON file and import them)
+const resources = {
+    en: {
+        ...en_us
+    },
+    zh: {
+        ...zh_cn
+    }
+};
+
+i18n
+    .use(initReactI18next) // passes i18n down to react-i18next
+    .use(languageDetector)
+    .init({
+        resources,
+        // lng: localStorage.getItem("lng") || 'en-us',
+        detection:{
+            // order and from where user language should be detected
+            order: ['querystring', 'cookie', 'localStorage','browser', 'navigator', 'path', 'subdomain'],
+
+            // keys or params to lookup language from
+            lookupQuerystring: 'lng',
+            lookupCookie: 'i18next',
+            lookupLocalStorage: 'i18nextLng',
+            lookupFromPathIndex: 0,
+            lookupFromSubdomainIndex: 0,
+
+            // cache user language on
+            caches: ['localStorage', 'cookie'],
+
+            // optional htmlTag with lang attribute, the default is:
+        },
+        fallbackLng: "en",
+        keySeparator: false, // we do not use keys in form messages.welcome
+
+        interpolation: {
+            escapeValue: false // react already safes from xss
+        }
+    });
+
+export default i18n;

src/locales/zh-cn.json

@@ -0,0 +1 @@
+{}