How to load translation from same file for both en and en-US language using i18next

Question

We are using react-i18next and maintaining translations only for language 'en' and 'fr'. Which is creating an issue for us, when the browser preferred language is 'en-US' the translations are not getting loaded, since there is no separate file maintained for en-US

Can someone suggest the possibility to use the same file for similar languages like 'en', 'en-US'?

Answer 1

You can do a custom implementation for I18n.

<IntlProvider
  defaultLocale="en"
  locale={locale}
  messages={messages[language]}
>

Then export all translation as:

export const messages = {
  en: EnTranslation,
  fr: FrTranslation
}

and based on users' locale, you can set language in your store. Since you are in command, you can do something like this:

const locales = {
  en: 'en',
  'en-US': 'en',
  'en-UK': 'en',
  fr: 'fr'
}

const setLanguage = (action) => {
  const locale = locales[action.payload]
  return {...state, locale }
}