react-i18next#initReactI18next TypeScript Examples

export function i18nInit({ localeKey }: I18NInitParams) {
  const enUS = numbro.languages()['en-US']
  const allNumbroLanguages = numbroLanguages as numbro.NumbroLanguage[]
  Object.values(allNumbroLanguages).forEach((languageRaw) => {
    // If a language object lacks some of the features, substitute these features from English
    numbro.registerLanguage({ ...enUS, ...languageRaw })
  })

  const i18n = i18nOriginal.use(initReactI18next).createInstance({
    resources,
    lng: DEFAULT_LOCALE_KEY,
    fallbackLng: DEFAULT_LOCALE_KEY,
    debug: process.env.DEV_ENABLE_I18N_DEBUG === '1',
    keySeparator: false, // Disable dots as key separators as we use dots in keys
    nsSeparator: false,
    interpolation: { escapeValue: false },
  })

  // eslint-disable-next-line no-void
  void i18n.init()

  const locale = locales[localeKey]
  LuxonSettings.defaultLocale = localeKey
  numbro.setLanguage(locale.full)

  return i18n
}

i18n
  .use(initReactI18next)
  .use(languageDetector as Module)
  .init({
    resources,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  });

i18next.use(initReactI18next).init({
  interpolation: {
    // React already does escaping
    escapeValue: false,
  },
  keySeparator: false, // we do not use keys in form messages.welcome
  lng: "en-US", // "en-US" | "zh-CN"
  fallbackLng: "en-US",
  resources: {
    "en-US": enUSLanguage,
    "zh-CN": zhCNLanguage,
    "zh-TW": zhTWLanguage,
    "ja-JP": jaJPLanguage,
  },
});

i18n
  // learn more: https://github.com/i18next/i18next-xhr-backend
  // .use(Backend)
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  .use(initReactI18next)
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    fallbackLng: "zh",
    /*global process*/
    debug: process.env.NODE_ENV === "development",
    supportedLngs: ["zh", "en"],
    nonExplicitSupportedLngs: true,
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
    react: {
      useSuspense: false,
    },
    compatibilityJSON: "v3",
    resources: {
      en: {
        [NS_BRICK_CONTAINER]: en,
      },
      zh: {
        [NS_BRICK_CONTAINER]: zh,
      },
    },
  });

// TODO: wait for `init` to complete before rendering?
void i18n
    .use(initReactI18next)
    .use(LanguageDetector)
    .init({
        resources: languages,
        fallbackLng: "en",
        interpolation: {
            escapeValue: false,
        },
        detection: {
            order: ["localStorage", "navigator"],
        },
        react: {
            transKeepBasicHtmlNodesFor: ["br", "strong", "i", "p", "code"],
        },
    });

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en,
      it,
    },
    fallbackLng: 'en',
    whitelist: ['en', 'it'],
    debug: process.env.NODE_ENV !== 'production',

    keySeparator: false,
    interpolation: {
      escapeValue: false,
      formatSeparator: ',',
    },
    react: {
      wait: true,
    },
  });

i18n.use(initReactI18next).init({
  resources,
  ns: ['common'],
  lng: 'en',
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false,
  },
});

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: 'en',

    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .use(ChainedBackend)
  .init({
    // debug: true,
    lng: navigator.language.substr(0, 2),
    fallbackLng: 'en',
    supportedLngs: ['en', 'zh'],
    nonExplicitSupportedLngs: true,
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
    backend: {
      backends: [
        resourcesToBackend((lng, ns, clb) => {
          import(`./${lng}/${ns}.json`)
            .then((resources) => clb(null, resources))
            .catch((err) => clb(err, undefined))
        }),
      ],
    },
  })

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      th: { translation: th },
    },
    fallbackLng: 'en',
    lng: 'en',
    interpolation: {
      escapeValue: false,
    },
  });

i18n
	// detect user language
	// learn more: https://github.com/i18next/i18next-browser-languageDetector
	.use(LanguageDetector)
	// passes i18n down to react-i18next
	.use(initReactI18next)
	.init({
		detection: detectionOptions,
		resources,
		fallbackLng: 'en',

		keySeparator: false, // we do not use keys in form messages.welcome

		interpolation: {
			escapeValue: false // react already safes from xss
		}
	})

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: getLangPrefix(getSystemLocale()),

    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

i18next
  .use(languageDetector)
  .use(HttpApi)
  .use(initReactI18next)
  .init({
    fallbackLng: 'zh-CN',
    load: 'currentOnly',
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
      allowMultiLoading: false,
      addPath: (...args: any[]) => {
        console.log('缺少翻译:', ...args);
      },
    },
    react: {
      // Reference: https://react.i18next.com/latest/trans-component#i-18-next-options
      hashTransKey(defaultValue: string) {
        // return a key based on defaultValue or if you prefer to just remind you should set a key return false and throw an error
        return `k${crc32(defaultValue).toString(16)}`;
      },
    },
  } as any);

// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: localStorage.getItem('language') || 'zh', // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
    // if you're using a language detector, do not define the lng option

    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

i18n
  .use(I18nextBrowserLanguageDetector)
  .use(initReactI18next)
  .init({
    resources: messages,
    fallbackLng: "en",
    supportedLngs: ["en", "zh-CN"],
    interpolation: {
      escapeValue: false,
    },
  });

export function i18nAuspiceInit() {
  const i18nAuspice = i18nOriginal.use(initReactI18next).createInstance({
    resources: {
      en: { sidebar: enSidebar, translation: enTranslation },
      ar: { sidebar: arSidebar, translation: arTranslation },
      de: { sidebar: deSidebar, translation: deTranslation },
      es: { sidebar: esSidebar, translation: esTranslation },
      fr: { sidebar: frSidebar, translation: frTranslation },
      // it: { sidebar: itSidebar, translation: itTranslation },
      // ko: { sidebar: koSidebar, translation: koTranslation },
      pt: { sidebar: ptSidebar, translation: ptTranslation },
      ru: { sidebar: ruSidebar, translation: ruTranslation },
      // zh: { sidebar: zhSidebar, translation: zhTranslation },
    },
    lng: DEFAULT_LOCALE_KEY,
    fallbackLng: DEFAULT_LOCALE_KEY,
    debug: process.env.DEV_ENABLE_I18N_DEBUG === '1',
    interpolation: { escapeValue: false },
    defaultNS: 'translation',
  })

  // eslint-disable-next-line no-void
  void i18nAuspice.init()

  return i18nAuspice
}

i18n
  .use(LanguageDetector)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources: i18nReources as any,
    detection: {
      caches: [],
    },

    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

i18n = i18next
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    resources: translationsJson,
    fallbackLng: 'en',
    debug: process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test',

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
  })

i18n
  .use(detector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    resources,
    defaultNS: 'common',
    react: {
      useSuspense: process.browser,
      transSupportBasicHtmlNodes: true,
      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'em', 'u'],
    }
  })

// don't want to use this?
// have a look at the Quick start guide
// for passing in lng and translations on init

i18n
  // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
  // learn more: https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    lng: 'en',
    saveMissing: true,
    saveMissingTo: 'all',
    fallbackLng: 'en', // TODO: to generate missing keys use false as value here, will be useful when custom nodejs server is created to store missing values
    debug: false, // change to true to see debug message logs in browser console
    whitelist: ['en', 'es', 'ru', 'ua', 'zh_CN', 'zh_TW', 'da', 'de', 'fi', 'ko', 'it', 'ja', 'nl', 'fr', 'sv'],
    backend: {
      // path where resources get loaded from
      loadPath: '/locales/{{lng}}/{{ns}}.json',
      // TODO: in future implement custom nodejs server that accepts missing translations POST requests and updates .missing.json files accordingly. Here is how to do so: https://www.robinwieruch.de/react-internationalization . it can be simple nodejs server that can be started when 'yarn dev' is running, need to ckagne package.json file then
      // path to post missing resources
      addPath: '/locales/{{lng}}/{{ns}}.json',
      // jsonIndent to use when storing json files
      jsonIndent: 2,
    },

    keySeparator: false, // we do not use keys in form messages.welcome

    interpolation: {
      escapeValue: false, // react already safes from xss
    },
  });

i18n = i18next
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    resources: translationsJson,
    fallbackLng: 'en',
    debug:
      process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test',

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
  })

// not like to use this?
// have a look at the Quick start guide
// for passing in lng and translations on init

i18n
	// pass the i18n instance to react-i18next.
	.use(initReactI18next)
	// init i18next
	// for all options read: https://www.i18next.com/overview/configuration-options
	.init({
		lng: 'en',
		fallbackLng: 'en',
		debug: process.env.NODE_ENV === 'development',
		interpolation: {
			escapeValue: false, // not needed for react as it escapes by default
		},
		resources: {
			en: {
				translation: en,
			},
			cs: {
				translation: cs,
			},
		},
	});

i18n
  .use(initReactI18next)
  .use(LanguageDetector)
  .init({
    detection: { lookupLocalStorage: LOCALSTORAGE_KEYS.LANGUAGE },
    lng: localStorage.getItem(LOCALSTORAGE_KEYS.LANGUAGE) || undefined,
    fallbackLng: "en",
    supportedLngs: Object.keys(resources),
    resources,
    debug: true,
    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
      format: function (value, format, lng) {
        if (format === "capitalize") return capitalize(value);
        return value;
      },
    },
  });

i18n = i18next
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    lng: initialLocale,
    resources: translationsJson,
    fallbackLng: 'en',
    debug:
      process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test',

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    },
  })

i18n
  .use(detector)
  .use(Backend)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    fallbackLng: 'en',
    debug: false,
    saveMissing: true,
    interpolation: {
      escapeValue: false, // react already safes from xss
    },
    backend: {},
    ns: ['react-components', 'react-params', 'react-query', 'react-signer'],
  });

export async function initI18N(): Promise<void> {
  const isDevelopment = await window.service.context.get('isDevelopment');
  const language = await window.service.preference.get('language');
  await i18n
    .use(ElectronFsBackend)
    .use(initReactI18next)
    .init({
      backend: {
        loadPath: 'locales/{{lng}}/{{ns}}.json',
        addPath: 'locales/{{lng}}/{{ns}}.missing.json',
        ipcRenderer: window.i18n.i18nextElectronBackend,
      },
      debug: isDevelopment,
      interpolation: { escapeValue: false },
      saveMissing: isDevelopment,
      saveMissingTo: 'current',
      // namespace: 'translation',
      lng: language,
      fallbackLng: isDevelopment ? false : 'en',
    });
  window.i18n.i18nextElectronBackend.onLanguageChange(async (language: { lng: string }) => {
    await i18n.changeLanguage(language.lng, (error?: Error) => {
      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
      if (error) {
        console.error(error);
      }
    });
  });
}

i18n
  .use(Backend)
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources: {
      en: {
        translation: en // Use the English translation in the locale-end file
      },
      es: {
        translation: es // Use the English translation in the locale-end file
      }
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

i18n
  .use(initReactI18next)
  .use(Backend)
  .init({
    lng: "en",
    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: true,
    },
  });

i18n
	.use(initReactI18next)
	.init({
		resources: {
			en: { translation: en },
			ja: { translation: ja },
		},
		fallbackLng: savedLocale ?? urlLocale,
		supportedLngs: ["en", "ja"],
		debug: process.env.NODE_ENV !== "production",
		interpolation: {
			escapeValue: false,
		}
	});