add language detector from i18next

package-lock.json

@@ -8700,6 +8700,22 @@
         "@babel/runtime": "^7.3.1"
       }
     },
+    "i18next-browser-languagedetector": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-4.0.2.tgz",
+      "integrity": "sha512-AK4IZ3XST4HIKShgpB2gOFeDPrMOnZx56GLA6dGo/8rvkiczIlq05lV8w77c3ShEZxtTZeUVRI4Q/cBFFVXS/w==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
+    "i18next-xhr-backend": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/i18next-xhr-backend/-/i18next-xhr-backend-3.2.2.tgz",
+      "integrity": "sha512-OtRf2Vo3IqAxsttQbpjYnmMML12IMB5e0fc5B7qKJFLScitYaXa1OhMX0n0X/3vrfFlpHL9Ro/H+ps4Ej2j7QQ==",
+      "requires": {
+        "@babel/runtime": "^7.5.5"
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",

package.json

@@ -16,6 +16,8 @@
     "axios": "^0.19.2",
     "html2canvas": "^1.0.0-rc.5",
     "i18next": "^19.4.1",
+    "i18next-browser-languagedetector": "^4.0.2",
+    "i18next-xhr-backend": "^3.2.2",
     "jspdf": "^1.5.3",
     "lodash": "^4.17.15",
     "postcss-cli": "^7.1.0",

src/i18n/index.js

@@ -1,5 +1,7 @@
 import i18n from 'i18next';
+import backend from 'i18next-xhr-backend';
 import { initReactI18next } from 'react-i18next';
+import detector from 'i18next-browser-languagedetector';
 
 import resources from './locales';
 
@@ -46,13 +48,17 @@ const languages = [
   },
 ];
 
-i18n.use(initReactI18next).init({
-  resources,
-  lng: 'en',
-  fallbackLng: 'en',
-  ns: ['app', 'leftSidebar', 'rightSidebar'],
-  defaultNS: 'app',
-});
+i18n
+  .use(detector)
+  .use(backend)
+  .use(initReactI18next)
+  .init({
+    resources,
+    lng: 'en',
+    fallbackLng: 'en',
+    ns: ['app', 'leftSidebar', 'rightSidebar'],
+    defaultNS: 'app',
+  });
 
 export { languages };