Ready to take i18next to the next level?

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.

latest - Previous

Step by step guide

Next - latest

useTranslation (hook)

Last updated 8 months ago

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