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.
