i18next instance

Last updated 2 months ago

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 { reactI18nextModule } from 'react-i18next';
i18n
.use(XHR)
.use(LanguageDetector)
.use(reactI18nextModule) // if not using I18nextProvider
.init({
fallbackLng: 'en',
debug: true,
interpolation: {
escapeValue: false, // not needed for react!!
},
// react i18next special options (optional)
react: {
wait: false,
bindI18n: 'languageChanged loaded',
bindStore: 'added removed',
nsMode: 'default'
}
});
export default i18n;

All additional options for react in init options:

options

default

description

wait

false

assert all provided namespaces are loaded before rendering the component (can be set globally too)

nsMode

'default'

default: namespaces will be loaded an the first will be set as default or fallback: namespaces will be used as fallbacks used in order provided

bindI18n

'languageChanged loaded'

which events trigger a rerender, can be set to false or string of events

bindStore

'added removed'

which events on store trigger a rerender, can be set to false or string of events

For more initialization options have look at the docs.

The instance could be passed to the I18nextProvider or directly to the translate hoc.