Use i18n and use-translation

package.json

@@ -7,8 +7,10 @@
  "@types/node": "12.7.4",
  "@types/react": "16.9.2",
  "@types/react-dom": "16.9.0",
+ "i18next": "^17.0.13",
  "react": "^16.9.0",
  "react-dom": "^16.9.0",
+ "react-i18next": "^10.12.2",
  "react-scripts": "3.1.1",
  "typescript": "3.6.2"
  },

src/App.tsx

@@ -1,26 +1,45 @@
-import React from 'react';
-import logo from './logo.svg';
+import React, { useState, useEffect } from 'react';
+import i18n from 'i18next';
+import { initReactI18next, useTranslation } from 'react-i18next';
+
 import './App.css';
 
+i18n.use(initReactI18next).init({
+ resources: {
+ en: {
+ translation: {
+ 'Welcome to React': 'Welcome to React and react-i18next.',
+ 'change language': 'change language',
+ },
+ },
+ ja: {
+ translation: {
+ 'Welcome to React': 'ようこそ React と react-i18next へ。',
+ 'change language': '言語を切り替え',
+ },
+ },
+ },
+ lng: 'ja',
+ fallbackLng: 'ja',
+ interpolation: { escapeValue: false },
+});
+
 const App: React.FC = () => {
+ const [t, i18n] = useTranslation();
+ const [lang, setLang] = useState('ja');
+
+ useEffect(() => {
+ i18n.changeLanguage(lang);
+ }, [lang, i18n]);
+
  return (
  <div className="App">
  <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.tsx</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
+ <p>{t('Welcome to React')}</p>
+ <button onClick={() => setLang(lang === 'en' ? 'ja' : 'en')}>{t('change language')}</button>
  </header>
  </div>
  );
-}
+};
 
 export default App;

yarn.lock

@@ -914,7 +914,7 @@
  dependencies:
  regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5":
  version "7.6.0"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.0.tgz#4fc1d642a9fd0299754e8b5de62c631cf5568205"
  integrity sha512-89eSBLJsxNxOERC0Op4vd+0Bqm6wRMqMbFtV3i0/fbaWw/mJ8Q3eBvgX0G4SyrOOLCtbu98HspF8o09MRT+KzQ==
@@ -4913,6 +4913,13 @@ html-minifier@^3.5.20:
  relateurl "0.2.x"
  uglify-js "3.4.x"
 
+[email protected]:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
+ integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
+ dependencies:
+ void-elements "^2.0.1"
+
 [email protected]:
  version "4.0.0-beta.5"
  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.5.tgz#2c53083c1151bfec20479b1f8aaf0039e77b5513"
@@ -4988,6 +4995,13 @@ https-browserify@^1.0.0:
  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
+i18next@^17.0.13:
+ version "17.0.13"
+ resolved "https://registry.yarnpkg.com/i18next/-/i18next-17.0.13.tgz#3c639e15de86e0523f8f286f6cf07db355ee0a4f"
+ integrity sha512-tCBpekVs95IsN3kdi/6HhnfzHDlpXerOmOsf2ZMWtct9YbMYKI54HVdQ6XxsHGXBxY+UgjbQJwqghKCd2sYQWw==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+
 [email protected]:
  version "0.4.23"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
@@ -8469,6 +8483,14 @@ react-error-overlay@^6.0.1:
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.1.tgz#b8d3cf9bb991c02883225c48044cb3ee20413e0f"
  integrity sha512-V9yoTr6MeZXPPd4nV/05eCBvGH9cGzc52FN8fs0O0TVQ3HYYf1n7EgZVtHbldRq5xU9zEzoXIITjYNIfxDDdUw==
 
+react-i18next@^10.12.2:
+ version "10.12.2"
+ resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-10.12.2.tgz#2f2d79b84c1f3e3844d110e4c9d5c73a48f99418"
+ integrity sha512-tZCBhUz8rJtgmTi1z2pWEoQBvFHjwOS2+TQ7L4RfJq1LDirXi2m+3Pwg6gUECVCGenWomLufWNiTwRF9fmBrUQ==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ html-parse-stringify2 "2.0.1"
+
 react-is@^16.8.1, react-is@^16.8.4:
  version "16.9.0"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
@@ -10174,6 +10196,11 @@ vm-browserify@^1.0.1:
  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
  integrity sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==
 
+void-elements@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+ integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
+
 w3c-hr-time@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"