feat: add react-i18next

package.json

@@ -33,6 +33,7 @@
     "file-saver": "^2.0.5",
     "howler": "^2.2.3",
     "html-to-image": "^1.11.11",
+    "i18next": "^24.2.1",
     "immer": "^9.0.21",
     "jotai": "^2.0.3",
     "lucide-react": "^0.294.0",
@@ -43,6 +44,7 @@
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "^4.3.7",
+    "react-i18next": "^15.4.0",
     "react-router-dom": "^6.8.2",
     "react-timer-hook": "^3.0.5",
     "react-tooltip": "^5.18.0",

src/hooks/useI18n.ts

@@ -0,0 +1,18 @@
+import { useTranslation } from 'react-i18next'
+
+const useI18n = () => {
+  const { t } = useTranslation()
+  const getI18n = (key: string, values?: Array<string>): string => {
+    let i18nStr = t(key)
+    if (values && values.length > 0) {
+      values.forEach((item, index) => {
+        i18nStr = i18nStr.replace('{' + index + '}', item)
+      })
+    }
+    return i18nStr
+  }
+
+  return getI18n
+}
+
+export default useI18n

src/i18n/config.ts

@@ -0,0 +1,23 @@
+import en from './en.json'
+import zh from './zh.json'
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+
+const resources = {
+  en: {
+    translation: en,
+  },
+  zh: {
+    translation: zh,
+  },
+}
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: 'zh',
+  interpolation: {
+    escapeValue: false,
+  },
+})
+
+export default i18n

src/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "Home_Start": "Startssss"
+}

src/i18n/zh.json

@@ -0,0 +1,3 @@
+{
+  "Home_Start": "开始"
+}

src/index.tsx

@@ -1,4 +1,5 @@
 import Loading from './components/Loading'
+import './i18n/config'
 import './index.css'
 import { ErrorBook } from './pages/ErrorBook'
 import { FriendLinks } from './pages/FriendLinks'

yarn.lock

@@ -1065,6 +1065,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.23.2", "@babel/runtime@^7.25.0":
+  version "7.26.0"
+  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
+  integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.23.5":
   version "7.23.5"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz#11edb98f8aeec529b82b211028177679144242db"
@@ -4019,6 +4026,13 @@ hsla-regex@^1.0.0:
   resolved "https://registry.npmmirror.com/hsla-regex/-/hsla-regex-1.0.0.tgz"
   integrity sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==
 
+html-parse-stringify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+  integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+  dependencies:
+    void-elements "3.1.0"
+
 html-tags@^3.1.0:
   version "3.3.1"
   resolved "https://registry.npmmirror.com/html-tags/-/html-tags-3.3.1.tgz"
@@ -4044,6 +4058,13 @@ husky@^8.0.0:
   resolved "https://registry.npmmirror.com/husky/-/husky-8.0.3.tgz"
   integrity sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==
 
+i18next@^24.2.1:
+  version "24.2.1"
+  resolved "https://registry.npmmirror.com/i18next/-/i18next-24.2.1.tgz#91e8f11fc9bd7042ec0bd36bed2dd0457aaa35fa"
+  integrity sha512-Q2wC1TjWcSikn1VAJg13UGIjc+okpFxQTxjVAymOnSA3RpttBQNMPf2ovcgoFVsV4QNxTfNZMAxorXZXsk4fBA==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
 iconv-lite@^0.6.3:
   version "0.6.3"
   resolved "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz"
@@ -5280,6 +5301,14 @@ react-hotkeys-hook@^4.3.7:
   resolved "https://registry.npmmirror.com/react-hotkeys-hook/-/react-hotkeys-hook-4.4.0.tgz"
   integrity sha512-wOaCWLwgT/f895CMJrR9hmzVf+gfL8IpjWDXWXKngBp9i6Xqzf0tvLv4VI8l3Vlsg/cc4C/Iik3Ck76L/Hj0tw==
 
+react-i18next@^15.4.0:
+  version "15.4.0"
+  resolved "https://registry.npmmirror.com/react-i18next/-/react-i18next-15.4.0.tgz#87c755fb6d7a567eec134e4759b022a0baacb19e"
+  integrity sha512-Py6UkX3zV08RTvL6ZANRoBh9sL/ne6rQq79XlkHEdd82cZr2H9usbWpUNVadJntIZP2pu3M2rL1CN+5rQYfYFw==
+  dependencies:
+    "@babel/runtime" "^7.25.0"
+    html-parse-stringify "^3.0.1"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz"
@@ -6184,6 +6213,11 @@ vite@^4.1.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
+[email protected]:
+  version "3.1.0"
+  resolved "https://registry.npmmirror.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
+
 webpack-sources@^3.2.3:
   version "3.2.3"
   resolved "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz"