Skip to main content

Configuration

All Tolgee JS integrations such as integration library for Angular or React share the same configuration properties.

Configuration properties#

mode#

There are two modes - production and development. When apiKey property is not provided, default mode is production. When both apiKey and apiUrl properties are provided, default mode is development.

apiKey#

Your api key, which can be obtained using Tolgee web application.

apiUrl#

Url of Tolgee server.

inputPrefix and inputSuffix#

In development mode, strings to be translated are wrapped by @tolgee/core library at first and then parsed and replaced with translated value. This mechanism is called wrapping.

inputPrefix is inserted before the encoded string and inputSuffix is inserted after the string. By those 2 strings Tolgee recognises strings, which are meant to be translated, so its good idea to make them unique enough not to collide with any other strings, which can appear in DOM.

Example:

inputPrefix = '%-%tolgee:';inputSuffix = '%-%';

These strings are unique enough to not clash with any other strings in your DOM, so it will not break your document.

defaultLanguage#

Default language to be set by as currentLanguage default. (default: en)

fallbackLanguage#

When translation is not provided in current language, Tolgee tries to find it in fallbackLanguage. (default: value of defaultLanguage property)

preloadFallback#

When true Tolgee loads both current language and fallback language before promise is resolved from Tolgee.run() method. Otherwise, Tolgee will try to load fallback language localization data just when it's needed (when some translation is missing in current language). That way some inappropriate value may be rendered when some text is missing in current language. (default false)

availableLanguages#

Tolgee chooses language automatically by user's default language provided by browser navigator object. To do so, it needs to know which languages are available to determine whether user's preferred language is supported by your app.

If user's language is not available, defaultLanguage is used instead.

Default: ['en']

filesUrlPrefix#

In production mode, localization texts are loaded from json files, which are loaded from url prefixed with this property value.

When your current language is "en" and your filesUrlPrefix is https://example.com/loc/files/, your localization data will be loaded from file loaded from url https://example.com/loc/files/en.json.

You can obtain these files by downloading them from Tolgee Web Application

staticData#

Using this property, you can provide localization data to Tolgee as an object. Tolgee will use this data in production mode.

import * as localeEn from 'i18n/en.json';import * as localeDe from 'i18n/de.json';
...const config = {  staticData: {        en: localeEn,        de: localeDe,      }  };

or you can provide the data using provider functions returning promises, so it works great with dynamic import feature:

const config = {  staticData: {        en: () => import('./i18n/en.json'),        de: () => import('./i18n/de.json'),      }  };

watch#

In development mode, watch is always set to true because Tolgee needs to find strings to replace with translated values every time when DOM is changed. In production mode, watching is not always necessary because integration libraries for React and Angular return translated values directly without wrapping, so wrapped encoded strings are never inserted to DOM.

If you are not using any JS framework, and you wish Tolgee to replace wrapped encoded texts even in production mode, set this to true.

watch: true is used in preparing for production part or get started tutorial, because this tutorial is framework independent and so no framework integration library is used.

ui#

To use Tolgee in development with in-context localization, you need to provide a constructor for UI class.

Example:

ui: window["@tolgee/ui"].UI,

@tolgee/core and @tolgee/ui are separated to reduce size of @tolgee/core library while ui library is needed just in development mode and may be omitted in production mode.

targetElement#

Element where wrapped strings are expected in development mode. (default: document.body)

tagAttributes#

Tolgee is able to watch also for wrapped localization strings in attributes of DOM elements. These attributes must be specified in these configuration properties.

Default:

tagAttributes: {    textarea: ['placeholder'],    input: ['value', 'placeholder'],    img: ['alt'],    '*': ['aria-label', 'title'],}

highlightKeys#

By default, in development mode, when you move mouse over an element containing translated text and key ALT is down, this element is highlighted by changing its background color. To modify the key use highlightKeys property.

Example:

import {ModifierKey} from "../clients/js/packages/core/lib/index";
...
    highlightKeys: [ModifierKey.Shift, ModifierKey.Alt]

Default: [ModifierKey.Alt]

passToParent#

There are elements which can contain wrapped string to be translated, but user is not able to click on them. For example an option of select HTML element cannot be used for capturing click even with ALT down. For these reasons you can configure Tolgee to "pass" these strings to parent and listen for click events on the parent.

Default: ["option", "optgroup"]

restrictedElement#

Array of elements in which you don't want Tolgee to replace wrapped strings.

Default: ['script', 'style']

highlightColor#

Background color of highlighted element.

Default: rgb(224 240 255)