# gt-react: General Translation React SDK: useTranslations
URL: https://generaltranslation.com/en-US/docs/react/api/dictionary/use-translations.mdx
---
title: useTranslations
description: API reference for the useTranslations hook
---
{/* AUTO-GENERATED: Do not edit directly. Edit the template in content/docs-templates/ instead. */}


## Overview

`useTranslations` is used to access string translations from the [translation dictionary](/docs/react/guides/dictionaries).

It must be used within a component wrapped by a [`<GTProvider>`](/docs/react/api/components/gtprovider).

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


<Callout>
  `useTranslations` uses a [dictionary](/docs/react/guides/dictionaries) to store all content for translation.
  This is different from using the [`<T>` component](/docs/react/guides/jsx) for translation.
  If you are interested in only using `<T>` components for translation, then this document is not relevant.
</Callout>

## Reference

### Parameters

<TypeTable
  type={{
    "id?": {
        type: 'string',
        optional: true,
        default: 'undefined',
    },
  }}
/>

### Description

| Prop | Description |
| ---- | ----------- |
| `id` | An optional prefix to prepend to all translation keys. This is useful for working with nested dictionary values.|


### Returns

A translation function `d` that, given an id, will return the translated version of the corresponding entry

```jsx
(id: string, options?: DictionaryTranslationOptions) => React.ReactNode
```

| Name                  | Type | Description                                                                 |
|-----------------------|--|-----------------------------------------------------------------------------|
| `id`             | `string` | The id of the entry to be translated                                     |
| `options?`            | [`DictionaryTranslationOptions`](/docs/react/api/types/dictionary-translation-options) | Translation options to customize the behavior of `d`. |

---

## Examples

### Basic dictionary usage
Every entry in your dictionary gets translated.

```jsx title="dictionary.jsx" copy
const dictionary = {
  greeting: "Hello, Bob", // [!code highlight]
};
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.

```jsx title="TranslateGreeting.jsx" copy
import { useTranslations } from 'gt-react';
import dictionary from "./dictionary.json"

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

### Using variables [#variables]
In order to pass values, you must (1) assign an identifier and (2) reference the identifier when calling the `d` function.

In this example, we use `{}` to pass variables to the translations.
In the dictionary, we assign identifier `{userName}`.

```jsx title="dictionary.jsx" copy
// [!code word:userName]
const dictionary = {
  greeting: "Hello, {userName}!", // [!code highlight]
};
export default dictionary;
```

```jsx title="TranslateGreeting.jsx" copy
// [!code word:userName]
import { useTranslations } from 'gt-react';

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

  return (
    <p>
      {greetingAlice} // Hello, Alice // [!code highlight]
    </p>
  );
}
```

### Using prefixes

We can use prefixes to only translate a subset of the dictionary.
```jsx  title="dictionary.jsx" copy
const dictionary = {
  prefix1: { // [!code highlight]
    prefix2: { // [!code highlight]
      greeting: "Hello, Bob",
    }
  }
};
export default dictionary;
```
Because we added the value `'prefix1.prefix2'` to the `useTranslations` hook, all of the keys are prefixed with `prefix1.prefix2`:
```jsx title="UserDetails.jsx" copy
import { useTranslations } from 'gt-react';

export default function UserDetails() {
  const t = useTranslations('prefix1.prefix2'); // [!code highlight]
  return (
    <div>
      <p>{t('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}
```
--- 
## Notes
 * The `useTranslations` function allows you to access dictionary translations.
 * The `useTranslations` hook can only be used within a component wrapped by a [`<GTProvider>` component](/docs/react/api/components/gtprovider).

## Next steps