# gt-react: General Translation React SDK: useTranslations
URL: https://generaltranslation.com/ru/docs/react/api/dictionary/use-translations.mdx
---
title: useTranslations
description: Справка по API хука useTranslations
---

{/* СОЗДАНО АВТОМАТИЧЕСКИ: Не редактируйте напрямую. Вместо этого изменяйте шаблон в content/docs-templates/. */}


## Обзор

`useTranslations` используется для получения переводов строк из [словаря переводов](/docs/react/guides/dictionaries).

Его нужно использовать внутри компонента, обёрнутого в [`<GTProvider>`](/docs/react/api/components/gtprovider).

```jsx
const t = useTranslations(); // Получить функцию перевода
t('greeting.hello'); // передать id для получения перевода
```

<Callout>
  `useTranslations` использует [словарь](/docs/react/guides/dictionaries) для хранения всего контента, предназначенного для перевода.
  Это отличается от перевода с помощью [компонента `<T>`](/docs/react/guides/t).
  Если вас интересует только использование компонентов `<T>` для перевода, этот документ вам не нужен.
</Callout>


## Справочник

### Параметры

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

### Описание

| Свойство | Описание                                                                                                                     |
| -------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `id`     | Необязательный префикс, который добавляется ко всем ключам перевода. Полезно при работе со значениями во вложенных словарях. |

### Возвращает

Функцию перевода `d`, которая по заданному идентификатору возвращает перевод соответствующей записи

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

| Название   | Тип                                                                                    | Описание                                      |
| ---------- | -------------------------------------------------------------------------------------- | --------------------------------------------- |
| `id`       | `string`                                                                               | Идентификатор записи, которую нужно перевести |
| `options?` | [`DictionaryTranslationOptions`](/docs/react/api/types/dictionary-translation-options) | Параметры перевода для настройки работы `d`.  |

***


## Примеры

### Базовое использование словаря

Все записи в вашем словаре переводятся.

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

Чтобы получить доступ к этим записям, вызовите `useTranslations`.
Он возвращает функцию, которая принимает ключ перевода из словаря.

Словарь нужно передать в компонент `GTProvider`.

```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>
  );
}
```


### Использование переменных [#variables]

Чтобы передать значения, нужно (1) задать идентификатор и (2) сослаться на него при вызове функции `d`.

В этом примере мы используем `{}` для передачи переменных в перевод.
В словаре мы задаём идентификатор `{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();
  
  // Привет, Алиса!
  const greetingAlice = t('greeting', { userName: "Alice" }); // [!code highlight]

  return (
    <p>
      {greetingAlice} // Привет, Алиса // [!code highlight]
    </p>
  );
}
```


### Использование префиксов

Префиксы можно использовать, чтобы переводить только часть словаря.

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

Поскольку мы добавили значение `'prefix1.prefix2'` в хук `useTranslations`, ко всем ключам добавляется префикс `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>
  );
}
```

***


## Примечания

* Функция `useTranslations` предоставляет доступ к словарным переводам.
* Хук `useTranslations` можно использовать только внутри компонента, обёрнутого в [компонент `<GTProvider>`](/docs/react/api/components/gtprovider).

## Дальнейшие шаги