# General Translation React SDKs (gt-react, gt-next, gt-react-native): useTranslations
URL: https://generaltranslation.com/en-US/docs/react/reference/hooks/use-translations.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Look up string translations from a dictionary by id. API reference for useTranslations.

The `useTranslations` hook returns a function for reading pre-translated strings from your [translation dictionary](/docs/react/guides/translating-with-dictionaries), resolved into the active locale 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`.*

## 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` under a [`<GTProvider>`](/docs/react/reference/components/gt-provider), with a dictionary supplied to the provider or initialization call. In `gt-next`, it also works in synchronous server components. If you only use [`<T>`](/docs/react/reference/components/t), you do not need it.*

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

- **Id-based lookup.** The returned function resolves a dictionary entry by id into 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 for 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]

*Examples import from `gt-react`; import from your framework's package instead.*

```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` accesses 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.

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.