Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time

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

For more initialization options have look at the docs.