diff --git a/client/src/i18n/index.ts b/client/src/i18n/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..f4661633e581c84abc3b329b3e04f2932270adb5 --- /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 38a827e0d9238db95c6edad4fbadb20b0281b9eb..3ee6e0caf7ee92dc57dcf34db21d1c12dc1a662d 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") );