Tweet

Pocket

react-intlの使い方が少し分かりにくかったのでメモ

packageの追加

yarn add react-intl

言語ファイルの準備（ja_JP.jsなどで作成）

const ja_JP = {
  'hello': 'こんにちわ'
}
export default ja_JP

import
addLocaleData([…en, …ja])をしておくことが必要ぽい
node_modules\react-intl\locale-dataにあるものを読み込むことが出来るのかな

import en_US from '../locales/en_US'
import ja_JP from '../locales/ja_JP'
import { IntlProvider, addLocaleData, FormattedMessage } from 'react-intl'
import en from 'react-intl/locale-data/en'
import ja from 'react-intl/locale-data/ja'
addLocaleData([...en, ...ja])

言語判定

const locale = navigator.language.split('_')[0]
const chooseLocale = (locale) => {
  switch(locale) {
    case 'en':
      return en_US
    case 'ja':
      return ja_JP
    default:
      return en_US
  }
}

IntlProvider
出来るだけトップレベルで囲っておくといいらしい

ReactDOM.render(
  <IntlProvider locale={locale} messages={chooseLocale(locale)}>
    <PublicIndex />
  </IntlProvider>,
  document.body.appendChild(document.createElement('div')),
)

表示
render内の任意の場所で記述

<FormattedMessage id='hello' />