update icu example

i18next · Jun 23, 2021 · c5068a1 · c5068a1
1 parent 4ae8a84
commit c5068a1
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 29 deletions.
diff --git a/example/react-icu/package.json b/example/react-icu/package.json
@@ -3,17 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/user-event": "^7.1.2",
-    "i18next": "20.0.0",
-    "i18next-browser-languagedetector": "^5.0.0",
-    "i18next-icu": "^1.3.0",
-    "i18next-http-backend": "^1.0.15",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-i18next": "^11.3.4",
-    "react-scripts": "3.4.1"
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.1.9",
+    "i18next": "20.3.2",
+    "i18next-browser-languagedetector": "^6.1.2",
+    "i18next-http-backend": "^1.2.6",
+    "i18next-icu": "^2.0.3",
+    "intl-messageformat": "9.7.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-i18next": "^11.11.0",
+    "react-scripts": "4.0.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -37,6 +38,6 @@
     ]
   },
   "devDependencies": {
-    "babel-plugin-macros": "^2.8.0"
+    "babel-plugin-macros": "^3.1.0"
   }
 }
diff --git a/example/react-icu/src/App.js b/example/react-icu/src/App.js
@@ -1,12 +1,12 @@
-import React, { Component } from 'react';
+import React, { Component, Suspense } from 'react';
 import { withTranslation, Trans } from 'react-i18next';
 import logo from './logo.svg';
 import './App.css';
 
 import ComponentUsingMacro from './ComponentUsingMacro';
 import ComponentUsingMacroInterpolated from './ComponentUsingMacroInterpolated';
 
-class App extends Component {
+class Page extends Component {
   render() {
     const { t, i18n } = this.props;
 
@@ -44,4 +44,13 @@ class App extends Component {
   }
 }
 
-export default withTranslation('translations')(App);
+const PageWithTranslation = withTranslation('translations')(Page);
+
+// here app catches the suspense from page in case translations are not yet loaded
+export default function App() {
+  return (
+    <Suspense fallback="Loading...">
+      <PageWithTranslation />
+    </Suspense>
+  );
+}
diff --git a/example/react-icu/src/i18n.js b/example/react-icu/src/i18n.js
@@ -4,20 +4,9 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 
 import ICU from 'i18next-icu';
-import de from 'i18next-icu/locale-data/de';
-const icu = new ICU({
-  localeData: de, // you also can pass in array of localeData
-});
-
-/**
- * or dynamically like: https://github.com/locize/locize-react-intl-example/blob/master/src/locize/index.js#L53
- */
-import('i18next-icu/locale-data/ru' /* webpackChunkName: "locale-data-ru" */).then(localeData =>
-  icu.addLocaleData(localeData),
-);
 
 i18n
-  .use(icu)
+  .use(ICU)
   .use(Backend)
   .use(LanguageDetector)
   .use(initReactI18next)
@@ -38,8 +27,7 @@ i18n
     },
 
     react: {
-      wait: true,
-      useSuspense: false,
+      useSuspense: true,
     },
   });