# General Translation React SDKs (gt-react, gt-next): useTranslations
URL: https://generaltranslation.com/en-GB/docs/react/reference/hooks/use-translations.mdx
---

title: useTranslations
description: Look up string translations from a dictionary by id with General Translation gt-react. API reference for useTranslations.

---

The `useTranslations` hook accesses string translations from the [translation dictionary](/docs/react/guides/translating-with-dictionaries) by id. This is the dictionary-based alternative to the [`<T>`](/docs/react/reference/components/t) component and [`useGT`](/docs/react/reference/hooks/use-gt).

*Available in `gt-react`, `gt-next`, `gt-tanstack-start`, and `gt-react-native`. Examples import from `gt-react`; import from your framework&#39;s package instead.*

## Overview [#overview]

Call `useTranslations` to get a lookup function, then pass an entry id.

```tsx
const t = useTranslations(); // get the translation function
t('greeting.hello'); // pass an id to get a translation
```

*Note: In `gt-react`, call `useTranslations` within a [`<GTProvider>`](/docs/react/reference/components/gt-provider), with a dictionary supplied to the provider or initialisation call. In `gt-next`, it also works in synchronous server components. If you only use `<T>`, you do not need it.*

## How it works [#how-it-works]

* **Id-based lookup.** The returned function resolves a dictionary entry by id for the active locale. Variables are interpolated but never translated.
* **Root id prefix.** Passing a `rootId` prefixes every lookup, which is convenient for working within a nested dictionary section.
* **Nested objects.** The returned function has an `.obj(id)` method for reading a nested dictionary object rather than a single string.
* **Missing ids throw.** Looking up an id that is not present in the dictionary throws.

## Parameters [#parameters]

| Parameter            | Description                        | Type     | Optional | Default |
| -------------------- | ---------------------------------- | -------- | -------- | ------- |
| [`rootId`](#root-id) | Prefix applied to every lookup id. | `string` | Yes      | —       |

### `rootId` [#root-id]

**Type** `string` · **Optional**

An optional prefix prepended to all lookup ids, useful when working with a nested subset of the dictionary.

## Returns [#returns]

**Type** `(id: string, options?: DictionaryTranslationOptions) => string`

A function that returns the translated entry for the given id. It also has an `.obj(id)` method for reading nested objects.

| Name      | Description                            | Type                                                                                         | Optional |
| --------- | -------------------------------------- | -------------------------------------------------------------------------------------------- | -------- |
| `id`      | The id of the entry to resolve.        | `string`                                                                                     | No       |
| `options` | Interpolation variables for the entry. | [`DictionaryTranslationOptions`](/docs/react/reference/types/dictionary-translation-options) | Yes      |

## Examples [#examples]

```tsx title="dictionary.ts"
const dictionary = {
  greeting: 'Hello, Bob', // [!code highlight]
};
export default dictionary;
```

```tsx title="TranslateGreeting.tsx"
import { useTranslations } from 'gt-react';

export default function TranslateGreeting() {
  const t = useTranslations(); // [!code highlight]
  return <p>{t('greeting')}</p>; // [!code highlight]
}
```

```tsx title="dictionary.ts"
const dictionary = {
  greeting: 'Hello, {userName}!', // [!code highlight]
};
export default dictionary;
```

```tsx title="TranslateGreeting.tsx"
import { useTranslations } from 'gt-react';

export default function TranslateGreeting() {
  const t = useTranslations();
  const greetingAlice = t('greeting', { userName: 'Alice' }); // [!code highlight]
  return <p>{greetingAlice}</p>; // "Hello, Alice!"
}
```

```tsx title="UserDetails.tsx"
import { useTranslations } from 'gt-react';

// dictionary: { prefix1: { prefix2: { greeting: 'Hello, Bob' } } }
export default function UserDetails() {
  const t = useTranslations('prefix1.prefix2'); // [!code highlight]
  return <p>{t('greeting')}</p>; // resolves prefix1.prefix2.greeting
}
```

## Notes [#notes]

* `useTranslations` retrieves dictionary translations by id.
* In an async App Router component, use [`getTranslations`](/docs/react/nextjs/reference/functions/get-translations) instead.
* In `gt-react`, it must be used inside a [`<GTProvider>`](/docs/react/reference/components/gt-provider) with a dictionary available.
* See the [dictionaries guide](/docs/react/guides/translating-with-dictionaries) for setup and conventions.