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.