Skip to main content
Version: 5.x.x

API

TolgeeProvider

Provides the Tolgee context. Use in the root of the application.

import { TolgeeProvider } from '@tolgee/svelte';

...

<TolgeeProvider>
<App />
</TolgeeProvider>

Prop fallback?

string - rendered when translations are loading.

Prop tolgee?

Provide a Tolgee instance.

Slot fallback

Alternative for fallback. Use when you to pass components.

<TolgeeProvider>
<App />
<div slot="fallback">Loading...</div>
</TolgeeProvider>

T component

Implement translation in your Svelte application. It has a very similar API to the t function.

import { T } from '@tolgee/svelte';

<T keyName="key" defaultValue="Default" />

Prop keyName

String - translation key.

Prop defaultValue?

String - Rendered if no translation for the specified key (in neither the selected language nor the base language) is present. If not provided, keyName gets rendered instead.

Prop params?

Record<string, string> - variable params, which can be used in translation value (read more about ICU message format).

Prop ns?

string - translation namespace

Prop noWrap?

Boolean (default: false)

  • false - in development mode translation will be wrapped
  • true - use when wrapping in dev mode causes problems. In-context translation won't work.

Prop language?

String - override current Tolgee language. Allows switching to different language for separate translation. Load the language manually with tolgee.loadRecord.

Function getTranslate

Use it for loading namespaces for specific components/pages or to get t function for translating (returned t function uses first namespace from the list automatically).

function getTranslate(ns?: string | string[]): {
t: Readable<TFnType>;
isLoading: Readable<boolean>;
};

Parameter ns

  • string | string[] - namespace(s) to be loaded

Property isLoading (Readable)

  • boolean - is true if any of the listed namespaces is loading. Use this property to ensure translations are rendered after they are loaded.

Function t (Readable)

Returns requested translation and also subscribes component to translation/language changes. Component will be re-rendered every time translation changes. If used with namespaces, t function will automatically use the first the namespace given to useTranslate function. Override this with the ns option.

$t('key', 'Default value', <options>)

Check tolgee.t function interface.

Function getTolgee

Returns the Tolgee instance as a Readable. Allows subscription to different events. Most common usecase is for language switching.

<script>
import { getTolgee } from '@tolgee/svelte';

// gets updated on language change
const tolgee1 = getTolgee(['language']);

// gets updated when loading changes
const tolgee2 = getTolgee(['loading']);

// never gets updated
const tolgee3 = getTolgee();
</script>

<div>Language: {$tolgee1.getLanguage()}</div>
<div>Loading: {$tolgee2.isLoading()}</div>