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
  • Separating translation files
  • Manage your translations with a management GUI
  • locize is the perfect translation management tool for your i18next project
  1. Guides

Multiple Translation Files

Last updated 1 year ago

One of the advantages of react-i18next is based on i18next it supports the separation of translations into multiple files - which are called namespaces in i18next context -> as you're accessing keys from a namespace defining that as a prefix:

So while this takes the translation from the defined default namespace:

i18next.t('look.deep');

This will lookup the key in a namespace (file) called common.json:

i18next.t('common:look.deep'); // not recommended with ns prefix when used in combination with natural language keys
// better use the ns option:
i18next.t('look.deep', { ns: 'common' })

In order to use multiple namespaces/translation files, you need to specify it when calling :

const { t } = useTranslation(['translation', 'common']);

:

withTranslation(['translation', 'common'])(MyComponent);

or :

<Translation ns={['translation', 'common']}>
{
  (t) => <p>{t('look.deep', { ns: 'common' })}</p>
}
</Translation>

Separating translation files

With react-i18next you can use any of the components passing down the t function to your components to load namespaces:

All take arguments to define which namespaces to load and will Suspense rendering until those got loaded.

So you do not need to load all translations upfront enabling you to create huge react based applications without slowing down loading of the first page cause all translations need to be loaded upfront (hello other i18n implementations).

Manage your translations with a management GUI

In i18next you have a lot of options to add translations on init, in your code calling API methods or using one of the backend implementation. For a detailed write up check out the .

is the perfect translation management tool for your project

➡️ + =

you can find a step by step guide, which will unleash the full power of i18next in combination with locize. See how your developer experience with this localization workflow . There's also the possibility to have an , with the help of the and the use of the save missing keys functionality, new keys not only gets added to locize automatically, while developing the app, but are also into the target languages using machine translation (like ).

useTranslation
withTranslation
Translation
"Add or load translation guide on i18next.com"
useTranslation (hook)
withTranslation (HOC)
Translation (render prop)
locize
i18next
i18next
locize
true continuous localization
Here
could look like
even more focused developer experience
auto-machinetranslation workflow
automatically translated
Google Translate