Обзор

Функция msg помечает и кодирует строки для перевода.

const encodedString = msg('Привет, мир!');

Закодированную строку следует передать в хук useMessages или функцию getTranslations, чтобы получить переводы.

Декодирование

Чтобы получить исходную строку, декодируйте её с помощью decodeMsg

import { msg, decodeMsg } from 'gt-react';
const encodedString = msg('Привет, мир!');
const decodedString = decodeMsg(encodedString);
console.log(decodedString); // «Привет, мир!»

Справка

Параметры

Возвращает

Закодированную строку, в которой интерполированные переменные (если есть) заменены их значениями.

Поведение

Production

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

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

Обязательно следуйте руководству по развёртыванию.

Разработка

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

При переводе по запросу в режиме разработки может возникать задержка. Этого не будет в production-сборках, если только контент явно не переводится по запросу, то есть с использованием tx или <Tx>.

Пример

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

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

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

const encodedString = msg('Привет, мир!');

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

Примечание: «Hello, world!» будет переведено на язык, выбранный пользователем.

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

Вы можете передавать переменные в переводы словаря.

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

const encodedString = msg('Привет, {name}!', { name: 'Alice' });

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

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

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

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

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

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

const encodedString = msg('В корзине {count, plural, =0 {нет товаров} =1 {один товар} other {{count} товаров}}', { count: 10 });

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

Примечания

• msg — это функция, которая помечает строки для перевода.
• Строки, отмеченные msg, обрабатываются до выполнения кода — на этапе сборки (кроме режима разработки).

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

• См. useMessages для перевода строк.