Skip to main content
Version: 5.x.x

Providing static data

Provide static localization data in production mode or if you want to use it without Tolgee platform.

Providing data using dynamic import​

To provide your localization data using dynamic import you will need to add providers for every supported language to staticData.

const tolgee = Tolgee().init({
  ...
  staticData: {
    en: () => import('./i18n/en.json'),
    de: () => import('./i18n/de.json'),

    // or for namespaces
    'de:common': () => import('./i18n/common/de.json'),
  }
})

Using this approach data will be fetched just when it's needed, so you will save some network traffic.

Using imported object​

import * as localeEn from 'i18n/en.json';
import * as localeDe from 'i18n/de.json';

import * as commonDe from 'i18n/common/de.json'

...

const tolgee = Tolgee().init({
  ...
  staticData: {
    en: localeEn,
    de: localeDe,

    // or for namespaces
    'de:common': commonDe,
  }
})

Using this approach, all localization data are bundled with your application. Don't use it, if our translations files are large. This approach is useful on SSR, when you need the translations to be available for initial render.

Providing data using backend plugin​

import { BackendFetch } from '@tolgee/react';

tolgee.use(BackendFetch());

BackendFetch will fetch translation files (en.json, de.json) from https://<your url>/i18n, so you don't have to list all the files explicitly.

If you don't use namespaces place your translation into /i18n folder:

├── i18n
│   ├── cs.json
│   └── en.json
├── index.html

If you use namespaces, it should look like this:

├── i18n
│   └── common
│       ├── en.json
│       └── de.json
├── index.html

This is default behavior, it's possible to customize in BackendFetch plugin.