react-i18next documentation
🏠 i18next🌐 localization as a service🎓 i18next crash course💾 GitHub Repository
  • Introduction
  • Getting started
  • Guides
    • Drawbacks of other i18n solutions
    • Quick start
    • Multiple Translation Files
    • Extracting translations
  • latest
    • Step by step guide
    • i18next instance
    • useTranslation (hook)
    • withTranslation (HOC)
    • Translation (render prop)
    • Trans Component
    • I18nextProvider
    • SSR (additional components)
    • Migrating v9 to v10
    • TypeScript
  • Misc
    • Using with ICU format
    • Using with fluent format
    • Testing
  • legacy v9
    • Step by step guide (v9)
    • Overview (v9)
    • i18next instance (v9)
    • I18nextProvider (v9)
    • withI18n (v9)
    • withNamespaces (v9)
    • NamespacesConsumer (v9)
    • Trans Component (v9)
    • Interpolate (v9)
    • SSR (v9)
  • 🌐localization as a service
  • 🎓i18next crash course
  • 💾GitHub Repository
Powered by GitBook
On this page
  1. legacy v9

i18next instance (v9)

Last updated 6 years 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 and on the i18next website.

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

The reactI18nextModule used below is an alternative to using the and asserts that components (render prop, hoc) lower in the element tree get access to the i18n instance.

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

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

assert all provided namespaces are loaded before rendering the component (can be set too); note that rendering will not be blocked again when dynamically updating ns on the after initial mount

For more initialization options have look at the .

i18next
plugins
I18nextProvider
I18nextProvider
docs
render prop component
globally