I wrote a plugin that goes through all my locale files and combine them into a single json file per locale, where each key follows the directory structure.
scenes/Home/locales/en.json
has some locales:
{
menuLabel: "Menu"
}
The plugin generates a file per locale, /public/locales/en.json
that I download when the app boots, which looks like this:
{
"scenes.Home.menuLabel": "Menu"
}
Then using React-Intl, I inject the content to the IntlProvider
and use it that way:
<FormattedMessage id="scenes.Home.menuLabel" />