How can I combine 2 files using i18next for Reactjs apps?

19 views Asked by At

My app is translated into English and I'm using React i18next for that purpose.

This is the initial configuration for i18next:

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';
import uiConfig from 'App/config/appConfig.json';
import myOfficeUiConfig from 'MyOffice/config/appConfig.json';
const { i18nServiceUrl, i18nSupportedLanguages, i18nDefaultLng } = uiConfig;
const {
    i18nServiceUrl: myOfficei18nServiceUrl,
    i18nSupportedLanguages: myOfficei18nSupportedLanguages,
    i18nDefaultLng: myOfficei18nDefaultLng,
} = myOfficeUiConfig;

i18next
   .use(LanguageDetector)
   .use(initReactI18next)
   .use(HttpApi)
   .init({
       backend: {
          loadPath: myOfficei18nServiceUrl || i18nServiceUrl,
       allowMultiLoading: false,
   },
   fallbackLng: myOfficei18nDefaultLng || i18nDefaultLng,
   keySeparator: false,
   supportedLngs: myOfficei18nSupportedLanguages || i18nSupportedLanguages,
   debug: false,
   interpolation: {
       escapeValue: false,
   },
   react: {
     useSuspense: true,
   },
});
export default i18next;

As you can see, I have 2 urls to configure i18next:

  • i18nServiceUrl
  • myOfficei18nServiceUrl

This is because we deploy this project in several offices so they may want to have their own translations and their own translations folders. The same for i18nSupportedLanguages and i18nDefaultLng.

But now I'm facing a situation in which an office doesn't want a specific language, but they want to change only some keys from the English file we provide in the main code. So what they did was to start modifying the core English translation file instead of creating their own.

This, of course, started creating a lot of conflicts whenever the main file was modified. But, as the core file used to be updated frequently, they wanted to use that one in order to ensure that they always had a pretty updated version of the file.

So my question is:

Is there a way to keep our original English file and have a smaller one in their office to modify only the desired keys and mix them? So if their language doesn't find a key in their office to use the original English file?

Maybe this is a super basic question, but even if I read the documentation, I feel confused and I cannot find a valid solution for this... Thanks in advance!

0

There are 0 answers