API of Tolgee for React
TolgeeProvider
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 | number | ReactElement | (val) => ReactNode>
- variable parameters, which can be used in translation value
(read more about ICU message format).
Prop noWrap?
Boolean
(default: false
)
false
- in development mode translation will be wrappedtrue
- use when wrapping in dev mode causes problems, in this case in-context translation won't work
Children defaultValue?
| keyName?
String
- If keyName
property is not defined, child is taken as keyName
. If 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 | number | ReactElement | (val) => ReactNode>,
noWrap?: boolean,
defaultValue?: string
): string
// or with options object
function t(options: {
key: string;
parameters?: Record<string, string | number | ReactElement | (val) => ReactNode>;
noWrap?: boolean;
defaultValue?: string;
}): string
Parameter key
String
- translation key.
Parameter parameters?
Record<string, string | number | ReactElement | (val) => ReactNode>
- 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 wrappedtrue
- use when wrapping in dev mode causes problems, or you pass write it outside the DOM (for exampledocument.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.
import { useSetLanguage, useCurrentLanguage } from '@tolgee/react';
const Component = () => {
const setLanguage = useSetLanguage();
const getLanguage = useCurrentLanguage();
return (
<select
onChange={(e) => setLanguage(e.target.value)}
value={getLanguage()}
>
...
</select>
);
};