useTranslations
API reference for the useTranslations hook
Overview
useTranslations is used to access string translations from the translation dictionary.
It must be used within a component wrapped by a <GTProvider>.
const d = useTranslations(); // Get the translation function
d('greeting.hello'); // pass the id to get a translationuseTranslations uses a dictionary to store all content for translation.
This differs from using the <T> component for translation.
If you’re only interested in using <T> components for translation, this document isn’t relevant.
Reference
Parameters
Prop
Type
Description
| Prop | Description |
|---|---|
id | An optional prefix added to all translation keys. This is useful when working with nested dictionary values. |
Returns
A translation function d that, given an ID, returns the translated version of the corresponding entry
(id: string, options?: DictionaryTranslationOptions) => React.ReactNode| Name | Type | Description |
|---|---|---|
id | string | The ID of the entry to be translated |
options? | DictionaryTranslationOptions | Translation options to customise the behaviour of d. |
Examples
Basic dictionary usage
Every entry in your dictionary is translated.
const dictionary = {
greeting: "Hello, Bob",
};
export default dictionary;When we want to access these entries, we call useTranslations.
This returns a function that accepts the key of a translation from the dictionary.
You must pass the dictionary to the GTProvider component.
import { useTranslations } from 'gt-react';
import dictionary from "./dictionary.json"
export default function TranslateGreeting() {
const d = useTranslations();
return (
<GTProvider dictionary={dictionary}>
<p>
{d('greeting')} // [!code highlight]
</p>
</GTProvider>
);
}Using variables
To pass values, you must (1) assign an identifier and (2) reference that identifier when calling the d function.
In this example, we use {} to pass variables to the translations.
In the dictionary, we assign the identifier {userName}.
const dictionary = {
greeting: "Hello, {userName}!",
};
export default dictionary;import { useTranslations } from 'gt-react';
export default function TranslateGreeting() {
const d = useTranslations();
// Hello, Alice!
const greetingAlice = d('greeting', { userName: "Alice" });
return (
<p>
{greetingAlice} // Hello, Alice // [!code highlight]
</p>
);
}Using prefixes
We can use prefixes to translate only part of the dictionary.
const dictionary = {
prefix1: {
prefix2: {
greeting: "Hello, Bob",
}
}
};
export default dictionary;Because we’ve added the value 'prefix1.prefix2' to the useTranslations hook, all the keys are prefixed with prefix1.prefix2:
import { useTranslations } from 'gt-react';
export default function UserDetails() {
const d = useTranslations('prefix1.prefix2');
return (
<div>
<p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
</div>
);
}Notes
- The
useTranslationsfunction lets you access dictionary translations. - The
useTranslationshook can only be used within a component wrapped by a<GTProvider>component.
Next steps
How is this guide?