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

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


## Обзор

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

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

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

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


## Справка

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

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

### Описание

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

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

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

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

| Имя        | Тип                                                                                           | Описание                                        |
| ---------- | --------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| `id`       | `string`                                                                                      | Идентификатор записи, которую нужно перевести   |
| `options?` | [`DictionaryTranslationOptions`](/docs/react-native/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-native';
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-native';

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-native';

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-native/api/components/gtprovider).

## Следующие шаги