Skip to main content



Provides Tolgee context. Use in root of your application.

import { TolgeeProvider } from '@tolgee/react';
<TolgeeProvider apiUrl={...} apiKey={...}>  <App /></TolgeeProvider>

Prop loadingFallback?#

React.Node - it is rendered when Tolgee is loading translations instead of provided content. You can pass custom loading element when using Vue with JSX.

Config as props#

All keys from TolgeeConfiguration object can be used as props.

T component#

import { T } from '@tolgee/react';
<T keyName="..." parameters={{ param: '...' }}>default value ...</T>

Prop keyName?#

String - translation key.

Prop parameters?#

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

Prop strategy?#


  • ELEMENT_WRAP - translation is wrapped with span element, which makes in-context localization work.
  • TEXT_WRAP - translation is wrapped with text, in-context localization works (see Advanced translating)
  • NO_WRAP - no wrapping, only raw string is rendered, in-context localization won't work, use wisely

Children defaultValue? | keyName?#

String - If keyName property is not defined, child is taken as keyName. I it is present child can be used as defaultValue.

Hook useTranslate#

Use this hook to get t function, which can be used for imperative translating.

import { useTranslate } from '@tolgee/react'
const Component = () => {  const t = useTranslate()
  return <div title={t('title_key')} />}

Function t#

Returns requested translation and also subscribes component to translation/language changes, so component will be re-rendered every time translation changes.

function t(  key: string,   parameters: Record<string, string>,  noWrap?: boolean,  defaultValue?: string): string
// or with options objectfunction t(options: {  key: string;  parameters?: Record<string, string>;  noWrap?: boolean;  defaultValue?: string;}): string

Parameter key#

String - translation key.

Parameter parameters?#

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

Parameter noWrap?#

Boolean (default: false)

  • false - in development mode translation will be wrapped
  • true - use when wrapping in dev mode causes problems, or you pass write it outside the DOM (for example document.title), in this case in-context translation won't work

Parameter defaultValue?#

String - It will be rendered if there is no translation for this key (in selected language nor base language). If you won't provide this value, key will be rendered instead.

Hook useCurrentLanguage#

Returns function getLanguage(): string, which returns current language key.

Hook useSetLanguage#

Returns function setLanguage(lang: string), which changes language in Tolgee context.

useCurrentLanguage & useSetLanguage
import { useSetLanguage, useCurrentLanguage } from '@tolgee/react';
const Component = () => {  const setLanguage = useSetLanguage();  const getLanguage = useCurrentLanguage();
  return (    <select      onChange={(e) => setLanguage(}      value={getLanguage()}    >      ...          </select>  );}