Обзор

Компонент <GTProvider> предоставляет контекст General Translation (GT) своим дочерним элементам, позволяя им получать доступ к переведённому содержимому. Он обязателен для любых клиентских переводов в вашем приложении.

Когда использовать

• Оберните всё приложение в <GTProvider>, чтобы включить переводы на клиенте.
• При работе со словарями при необходимости укажите id, чтобы ограничить объём словарных данных, отправляемых на клиент, что улучшит производительность при больших словарях.
• Компонент <GTProvider> используется и для встроенного <T>, и для словарей.

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

Свойства

Описание

Возвращает

React.JSX.Element | undefined, содержащий дочерние элементы, переданные этому компоненту.

Примеры

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

Обёрните приложение в <GTProvider>, чтобы включить перевод. Не забудьте добавить список поддерживаемых локалей, чтобы активировать перевод.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
import { GTProvider } from "gt-react";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']}> // Включить испанский и французский языки // [!code highlight]
      <App />
    </GTProvider> // [!code highlight]
  </StrictMode>
);

Словари

Вы также можете передать словарь компоненту <GTProvider> и затем получить к нему доступ с помощью хука useTranslations.

import dictionary from "./dictionary.js";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']} dictionary={dictionary}> // [!code highlight]
      <App />
    </GTProvider>
  </StrictMode>
);

Подробнее об использовании словарей см. в этом руководстве.

Добавление конфигурации

Если вам не нравится передавать пропсы напрямую в компонент <GTProvider>, вы можете создать файл конфигурации и передать его компоненту. Конфигурация также напрямую интегрируется с командой gtx-cli translate, поэтому вам не нужно вручную указывать, например, локали в параметрах.

{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // позволяет откатываться к предыдущим версиям перевода (генерируется автоматически CLI)
}

Всё, что нужно, — просто передать это компоненту <GTProvider>.

import config from "../gt.config.json";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider {...config}> // [!код подсветки]
      <App />
    </GTProvider>
  </StrictMode>
);

Пользовательский загрузчик переводов

Вы можете использовать проп loadTranslations, чтобы загружать переводы из произвольного источника. Это полезно, если нужно подтянуть переводы из другого места, например из собственного API.

import loadTranslations from "./loadTranslations";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider locales={['es', 'fr']} loadTranslations={loadTranslations}> // [!code highlight]
      <App />
    </GTProvider>
  </StrictMode>
);

Параметры рендеринга

Параметры рендеринга определяют поведение загрузки переводов. Есть два поля: timeout и method.

• timeout — время в миллисекундах, в течение которого ожидается загрузка перевода перед показом запасного варианта (по умолчанию: 8000ms).
• method — способ загрузки переводов ("skeleton", "replace" или "default").

<GTProvider renderSettings={{ method: "skeleton", timeout: 1000 }}>
  <App />
</GTProvider>

Каждая настройка рендеринга определяет различное поведение загрузки: "skeleton" возвращает null, пока переводы не будут загружены. "replace" возвращает резервный контент, пока переводы не будут загружены. "default" возвращает null, пока переводы не будут загружены, если только резервная локаль не относится к тому же языку, что и текущая локаль (например, en-US и en-GB). В этом случае сразу возвращается резервный контент, пока переводы не будут загружены.

Примечания

• <GTProvider> должен оборачивать все компоненты <T> и другие функции, связанные с переводом. Подробнее — здесь.

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

• Узнайте больше о компоненте <T> для перевода текста и компонентов.