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

title: useTranslations
description: Получайте переводы строк из словаря по id с помощью useTranslations в General Translation gt-react. Справочник API по useTranslations.

---

Хук `useTranslations` получает переводы строк из [словаря переводов](/docs/react/guides/translating-with-dictionaries) по id. Это альтернатива на основе словаря компоненту [`<T>`](/docs/react/reference/components/t) и хуку [`useGT`](/docs/react/reference/hooks/use-gt).

*Доступно в `gt-react`, `gt-next`, `gt-tanstack-start` и `gt-react-native`. В примерах используется импорт из `gt-react`; вместо него импортируйте из пакета вашего фреймворка.*

## Обзор [#overview]

Вызовите `useTranslations`, чтобы получить функцию поиска, а затем передайте ей id записи.

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

*Примечание: в `gt-react` вызывайте `useTranslations` внутри [`<GTProvider>`](/docs/react/reference/components/gt-provider), передав словарь в `GTProvider` или в вызов инициализации. В `gt-next` это также работает в синхронных серверных компонентах. Если вы используете только `<T>`, `useTranslations` вам не нужен.*

## Как это работает [#how-it-works]

* **Поиск по id.** Возвращаемая функция находит запись словаря по id для активной локали. Переменные интерполируются, но никогда не переводятся.
* **Префикс root id.** При передаче `rootId` он добавляется как префикс к каждому поиску, что удобно при работе с вложенным разделом словаря.
* **Вложенные объекты.** У возвращаемой функции есть метод `.obj(id)` для чтения вложенного объекта словаря, а не одной строки.
* **Отсутствующие id вызывают исключение.** Поиск id, которого нет в словаре, приводит к исключению.

## Параметры [#parameters]

| Параметр             | Описание                                | Тип      | Необязательный | По умолчанию |
| -------------------- | --------------------------------------- | -------- | -------------- | ------------ |
| [`rootId`](#root-id) | Префикс, применяемый ко всем id поиска. | `string` | Да             | —            |

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

**Тип** `string` · **Необязательно**

Необязательный префикс, который добавляется ко всем id поиска; полезен при работе с вложенным подмножеством словаря.

## Возвращает [#returns]

**Тип** `(id: string, options?: DictionaryTranslationOptions) => string`

Функция, которая возвращает переведённую запись для указанного id. У неё также есть метод `.obj(id)` для чтения вложенных объектов.

| Name      | Description                         | Type                                                                                         | Optional |
| --------- | ----------------------------------- | -------------------------------------------------------------------------------------------- | -------- |
| `id`      | id записи, которую нужно получить.  | `string`                                                                                     | No       |
| `options` | Переменные интерполяции для записи. | [`DictionaryTranslationOptions`](/docs/react/reference/types/dictionary-translation-options) | Yes      |

## Примеры [#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';

// словарь: { prefix1: { prefix2: { greeting: 'Hello, Bob' } } }
export default function UserDetails() {
  const t = useTranslations('prefix1.prefix2'); // [!code highlight]
  return <p>{t('greeting')}</p>; // возвращает prefix1.prefix2.greeting
}
```

## Заметки [#notes]

* `useTranslations` обращается к переводам в словаре по id.
* В асинхронном компоненте App Router вместо этого используйте [`getTranslations`](/docs/react/nextjs/reference/functions/get-translations).
* В `gt-react` его нужно использовать внутри [`<GTProvider>`](/docs/react/reference/components/gt-provider), где доступен словарь.
* Инструкции по setup и принятым соглашениям см. в [руководстве по словарям](/docs/react/guides/translating-with-dictionaries).