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 XHR from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
i18n
.use(XHR)
.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.