Обзор

useGT — это хук для перевода строк на этапе сборки.

const t = useGT();

<p>{  t('Этот текст будет переведен')  }</p>;

Справочные материалы

Параметры

Отсутствуют

Возвращает

Функцию обратного вызова t, которая переводит переданный контент.

(content: string, options?: InlineTranslationOptions) => string

Поведение

Продакшен

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

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

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

Разработка

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

Во время перевода по запросу в режиме разработки может быть заметна задержка. В продакшен‑сборках этого не будет.

Пример

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

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

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Привет, Алиса!')}
    </p>
  );
}

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

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

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

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Привет, {name}!', { name: 'Alice' })}
    </p>
  );
}

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

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

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

import { useGT } from 'gt-react';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('В корзине {count, plural, =0 {нет товаров} =1 {один товар} few {{count} товара} many {{count} товаров} other {{count} товара}}', { count: 10 })}
    </p>
  );
}

Примечания

• Функция useGT — это хук для перевода строк.
• Хук useGT можно использовать только внутри компонента, обёрнутого компонентом <GTProvider>.
• Перевод строк с useGT выполняется до времени выполнения, на этапе сборки (кроме режима разработки).

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

• См. useTranslations для перевода строк с помощью словаря.