i18next instance

i18next localization as a service Find your translator
Search…
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.
1
import i18n from 'i18next';
2
import Backend from 'i18next-http-backend';
3
import LanguageDetector from 'i18next-browser-languagedetector';
4
import { initReactI18next } from 'react-i18next';
5
​
6
​
7
i18n
8
  .use(Backend)
9
  .use(LanguageDetector)
10
  .use(initReactI18next) // bind react-i18next to the instance
11
  .init({
12
    fallbackLng: 'en',
13
    debug: true,
14
​
15
    interpolation: {
16
      escapeValue: false, // not needed for react!!
17
    },
18
​
19
    // react i18next special options (optional)
20
    // override if needed - omit if ok with defaults
21
    /*
22
    react: {
23
      bindI18n: 'languageChanged',
24
      bindI18nStore: '',
25
      transEmptyNodeValue: '',
26
      transSupportBasicHtmlNodes: true,
27
      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'],
28
      useSuspense: true,
29
    }
30
    */
31
  });
32
​
33
​
34
export default i18n;
Copied!
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
keyPrefix
undefined
the optional keyPrefix will be automatically applied to the returned t function in useTranslation for example.
For more initialization options have look at the docs.
latest - Previous
Step by step guide
Next - latest
useTranslation (hook)
Last modified 3d ago
Copy link