# gt-react: General Translation React SDK: useMessages
URL: https://generaltranslation.com/ru/docs/react/api/strings/use-messages.mdx
---
title: useMessages
description: Справочник по API функции перевода строк useMessages()
---

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


## Обзор

Функция `useMessages` — это хук для перевода строк, закодированных с помощью `msg`, на этапе сборки.

```jsx
const m = useMessages();

<p>{m(encodedString)}</p>;
```

<Callout>
  **Перевод на этапе сборки:** переводы через `useMessages` выполняются на этапе сборки,
  до развертывания приложения. Вы можете передавать закодированные строки, созданные с помощью `msg`, и они будут
  переведены на предпочитаемый пользователем язык.
</Callout>


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

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

Нет

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

Функцию обратного вызова `m`, которая переводит переданное закодированное содержимое из `msg`.

```jsx
(encodedContent: string, options?: Record<string, any>) => string
```

| Имя              | Тип                   | Описание                                                                  |
| ---------------- | --------------------- | ------------------------------------------------------------------------- |
| `encodedContent` | `string`              | Закодированное содержимое строки из `msg`, которое нужно перевести.       |
| `options?`       | `Record<string, any>` | Необязательные параметры для передачи переменных в закодированную строку. |

***


## Поведение

### Продакшен

Во время процесса CD любой текст внутри функции `msg` будет переведён ещё до развертывания приложения.
Это обеспечивает быструю загрузку для всех локалей, но переводится только контент, известный на этапе сборки.

После генерации переводы либо (1) сохраняются в CDN, либо (2) включаются в результаты сборки вашего приложения — в зависимости от конфигурации.
После этого переведённый контент отдаётся пользователям.
Если перевод не найден, будет использован исходный контент.

Обязательно следуйте [этому руководству по развертыванию](/docs/react/tutorials/quickdeploy).

### Разработка

Во время разработки функция `m` будет переводить контент по запросу.
Это полезно, чтобы быстро проверить, как ваше приложение будет выглядеть на разных языках.
Не забудьте добавить Dev API key в переменные окружения, чтобы включить это поведение.

При переводе по запросу в режиме разработки будет заметна задержка.
В production-сборках этого не происходит, если только контент явно не переводится по запросу.

***

## Пример

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

Вы можете использовать `useMessages`, чтобы переводить строки, закодированные с помощью `msg`.

```jsx copy
import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Hello, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return <p>{m(encodedGreeting)}</p>;
}
```

Примечание: &quot;Alice&quot; будет переведено на язык, предпочитаемый пользователем.


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

В закодированные строки можно передавать переменные.

```jsx copy
import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Hello, {name}!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}{' '}
      {/* Выведет "Hello, Bob!" */}
    </p>
  );
}
```

### Переменные `msg` имеют приоритет над переменными `m`

Если вы передаёте переменные и в `msg`, и в `m`, переменные из `msg` имеют приоритет над переменными из `m`.

```jsx copy
import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Hello, {name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();
  return <p>{m(encodedGreeting, { name: 'Bob' })}</p>;
}
```

Примечание: будет отображаться &quot;Hello, Alice!&quot; — переменная не переопределяется во время рендеринга.


### Использование формата сообщений ICU

`gt-react` поддерживает формат сообщений ICU, который также позволяет форматировать значения переменных.

```jsx copy
import { msg, useMessages } from 'gt-react';

const encodedMessage = msg(
  'There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart',
  { count: 10 }
);

export default function TranslateGreeting() {
  const m = useMessages();
  return <p>{m(encodedMessage)}</p>;
}
```

<Callout>
  Формат сообщений ICU — это мощный инструмент для форматирования переменных. Подробнее см. в [документации по формату сообщений
  ICU](https://unicode-org.github.io/icu/userguide/format_parse/messages/).
</Callout>


### Импорт из `gt-react`

Если вы используете директиву `"use client"`, импортируйте из `gt-react`, а не из `gt-react`.

```jsx copy
'use client';
import { msg, useMessages } from 'gt-react';

const encodedGreeting = msg('Hello, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return <p>{m(encodedGreeting)}</p>;
}
```

***


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

* Функция `useMessages` — это хук, который переводит строки, закодированные с помощью `msg`.
* Перевод строк через `useMessages` происходит до времени выполнения, на этапе сборки (кроме режима разработки).

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

* См. [`msg`](/docs/react/api/strings/msg), чтобы узнать, как кодировать строки для перевода.