i18next-instance.md

i18next instance

The instance is an initialized i18next instance. In the following code snippet, we add a backend to load translations from server and a language detector for detecting user language.

You can learn more about i18next and plugins on the i18next website.

import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';


i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next) // bind react-i18next to the instance
  .init({
    fallbackLng: 'en',
    debug: true,

    interpolation: {
      escapeValue: false, // not needed for react!!
    },

    // react i18next special options (optional)
    // override if needed - omit if ok with defaults
    /*
    react: {
      bindI18n: 'languageChanged',
      bindI18nStore: '',
      transEmptyNodeValue: '',
      transSupportBasicHtmlNodes: true,
      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'],
      useSuspense: true,
    }
    */
  });


export default i18n;

All additional options for react in init options:

options	default	description
bindI18n	'languageChanged'	which events trigger a rerender, can be set to false or string of events separated by ""
bindI18nStore	''	define which events on resourceStore should trigger a rerender
transEmptyNodeValue	''	how to treat failed lookups in Trans component
transSupportBasicHtmlNodes	true	convert eg. <br/> found in translations to a react component of type br See Trans component
transKeepBasicHtmlNodesFor	['br', 'strong', 'i', 'p']	Which nodes not to convert in defaultValue generation in the Trans component. See Trans component
useSuspense	true	If using Suspense or not
keyPrefix	undefined	the optional keyPrefix will be automatically applied to the returned t function in useTranslation for example.

For more initialization options have look at the docs.