【React】動的に言語を変更する【i18next】
2024-7-16 | React, TypeScript
Reactでi18next
を使って動的に言語を変更したい!
概要
今回の記事では、Reactでi18next
を使って動的に言語を変更する手順を掲載する。
仕様書
環境
- node v21.1.0
- npm 10.8.1
- react 18.3.1
- react-dom 18.3.1
- i18next 23.11.5
- react-i18next 14.1.2
手順書
インストール編と多言語対応編の2部構成です。
インストール編
プロジェクトにi18next
とreact-i18next
をインストールする。
npm install i18next react-i18next
多言語対応編
src/i18n.ts
を作り、このファイルに言語に関するデータを記述する。
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
const resources = {
en: {
translation: {
"test": "TEST",
"message": "Message",
}
},
ja: {
translation: {
"test": "テスト",
"message": "メッセージ",
}
}
};
const userLanguage = navigator.language || navigator.languages[0];
i18n
.use(initReactI18next)
.init({
resources,
lng: userLanguage.split('-')[0],
fallbackLng: 'en',
interpolation: {
escapeValue: false
}
});
export default i18n;
i18n.init
のlng
でアクティブな言語、fallbackLng
で対応してない言語が選択された場合に使用する言語を設定する。
上記の例ではlng
にブラウザの言語設定を取得して言語を設定してる。
App.tsx
の中で多言語対応する例。
import React from 'react';
import i18n from 'i18n';
import { useTranslation } from 'react-i18next';
function App() {
const { t } = useTranslation();
const changeLang = (lng: string) => {
i18n.changeLanguage(lng);
};
return (
<div>
<p>{t('test')}</p>
<p>{t('message')}</p>
<button onClick={() => changeLang('en')}>English</button>
<button onClick={() => changeLang('ja')}>日本語</button>
</div>
);
}
export default App;
<button>
をクリックすると対応した言語に切り替わる。
まとめ(感想文)
グローバルなアプリを作る時に使えるかもね!