From 619894fc2a7444782cd34d6367970ad872b616b5 Mon Sep 17 00:00:00 2001
From: Leander Tolksdorf <leander.tolksdorf@fu-berlin.de>
Date: Wed, 8 Dec 2021 16:00:46 +0100
Subject: [PATCH] Setup i18n boilerplate
Co-authored-by: Alexander Rudolph <drblaui@users.noreply.github.com>
Co-authored-by: Sebastian Kuzniarz <kuzniarz@users.noreply.github.com>
---
client/src/i18n/index.ts | 31 +++++++++++++++++++++++++++++++
client/src/index.tsx | 8 ++++++--
2 files changed, 37 insertions(+), 2 deletions(-)
create mode 100644 client/src/i18n/index.ts
diff --git a/client/src/i18n/index.ts b/client/src/i18n/index.ts
new file mode 100644
index 0000000..f466163
--- /dev/null
+++ b/client/src/i18n/index.ts
@@ -0,0 +1,31 @@
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+
+// don't want to use this?
+// have a look at the Quick start guide
+// for passing in lng and translations on init
+
+i18n
+ // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
+ // learn more: https://github.com/i18next/i18next-http-backend
+ // want your translations to be loaded from a professional CDN? => https://github.com/locize/react-tutorial#step-2---use-the-locize-cdn
+ .use(Backend)
+ // detect user language
+ // learn more: https://github.com/i18next/i18next-browser-languageDetector
+ .use(LanguageDetector)
+ // pass the i18n instance to react-i18next.
+ .use(initReactI18next)
+ // init i18next
+ // for all options read: https://www.i18next.com/overview/configuration-options
+ .init({
+ fallbackLng: "en",
+ debug: true,
+
+ interpolation: {
+ escapeValue: false, // not needed for react as it escapes by default
+ },
+ });
+
+export default i18n;
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 38a827e..3ee6e0c 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -1,11 +1,15 @@
-import React from "react";
+import React, { Suspense } from "react";
import ReactDOM from "react-dom";
+import Loading from "./components/Loading";
+import "./i18n";
import Router from "./Router";
import "./styles/app.scss";
ReactDOM.render(
<React.StrictMode>
- <Router />
+ <Suspense fallback={<Loading />}>
+ <Router />
+ </Suspense>
</React.StrictMode>,
document.getElementById("root")
);
--
GitLab