react-i18nextで一部だけ文字を装飾したい

やりたいこと

用意したTranslationの一部をboldにしたかった。
useTranslationのtだけじゃ無理だった。

答え

<Trans>を利用して、react-i18nextで一部許されているタグで装飾する。

translation.json

"hey":  "Hey <strong>{{name}}</strong> !"

example.tsx

const {t} = useTranslation("translation")
const name = "Name"

<Trans t={t} i18nKey={"hey"} values={{name}} />

translation.jsonでは装飾したい箇所にタグで囲っておき、<Trans>にt i18nKey valuesを指定する。
これに気づくのに半日以上溶かした。

おまけ：span タグなどを適応できるようにする

i18next instance - react-i18next documentation

ここにあるように、デフォルトだとbrとかしか使えない。
そのため、next-i18next.config.js に transKeepBasicHtmlNodesForを追加する。

module.exports = {
  i18n: {
    // ...
    react: {
      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'span'],
    }  
  }
}

これでspanなどが使えるようになるが、classとかの属性はつけられないっぽい。（そこまでちゃんと調べてない。）

感想

なんてわかりにくいライブラリなんだ・・