From de8106282ed6e65e3258e3c82e3adab8edcfb11d Mon Sep 17 00:00:00 2001 From: tendguo <962203291@qq.com> Date: Tue, 21 Jan 2025 21:06:08 +0800 Subject: [PATCH] feat: add react-i18next --- package.json | 2 ++ src/hooks/useI18n.ts | 18 ++++++++++++++++++ src/i18n/config.ts | 23 +++++++++++++++++++++++ src/i18n/en.json | 3 +++ src/i18n/zh.json | 3 +++ src/index.tsx | 1 + yarn.lock | 34 ++++++++++++++++++++++++++++++++++ 7 files changed, 84 insertions(+) create mode 100644 src/hooks/useI18n.ts create mode 100644 src/i18n/config.ts create mode 100644 src/i18n/en.json create mode 100644 src/i18n/zh.json diff --git a/package.json b/package.json index e5d845f25c..651b52b1c6 100644 --- a/package.json +++ b/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", diff --git a/src/hooks/useI18n.ts b/src/hooks/useI18n.ts new file mode 100644 index 0000000000..6360a05e06 --- /dev/null +++ b/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 => { + 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 diff --git a/src/i18n/config.ts b/src/i18n/config.ts new file mode 100644 index 0000000000..b176ae1243 --- /dev/null +++ b/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 diff --git a/src/i18n/en.json b/src/i18n/en.json new file mode 100644 index 0000000000..42cd72d64a --- /dev/null +++ b/src/i18n/en.json @@ -0,0 +1,3 @@ +{ + "Home_Start": "Startssss" +} diff --git a/src/i18n/zh.json b/src/i18n/zh.json new file mode 100644 index 0000000000..ced74f8277 --- /dev/null +++ b/src/i18n/zh.json @@ -0,0 +1,3 @@ +{ + "Home_Start": "开始" +} diff --git a/src/index.tsx b/src/index.tsx index 1c287e1e67..d125495944 100644 --- a/src/index.tsx +++ b/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' diff --git a/yarn.lock b/yarn.lock index cdf4fe90fb..99f197b475 100644 --- a/yarn.lock +++ b/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" +void-elements@3.1.0: + 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"