<GTProvider>

概要

<GTProvider> コンポーネントは、子要素に一般翻訳（GT）コンテキストを提供し、翻訳されたコンテンツへアクセスできるようにします。アプリケーションでクライアントサイドの翻訳を行う場合は必須です。

使用するタイミング

クライアントで翻訳を有効にするために、アプリケーション全体を <GTProvider> でラップします。
辞書を使用する場合、大きな辞書のパフォーマンスを最適化するために、オプションで id を指定してクライアントに送信する辞書データを制限できます。
<GTProvider> コンポーネントは、インライン <T> と辞書の両方で使用されます。

リファレンス

プロパティ

Prop	Type	Default
`metadata??`	`object`	-
`devApiKey??`	`string`	-
`_versionId??`	`string`	-
`renderSettings??`	`RenderSettings`	`defaultRenderSettings`
`runtimeUrl??`	`string`	`'https://runtime.gtx.dev'`
`cacheUrl??`	`string`	`'https://cdn.gtx.dev'`
`locale??`	`string`	-
`defaultLocale??`	`string`	`libraryDefaultLocale`
`locales??`	`string[]`	-
`dictionary??`	`Dictionary`	`defaultDictionary`
`id??`	`string`	`undefined`
`projectId?`	`string`	-
`children?`	`ReactNode`	-

説明

プロパティ	説明
`children`	クライアント側で翻訳または翻訳情報にアクセスする必要があるコンポーネントまたはそのような親コンポーネント。これには`<T>`、`useGT`、またはその他の翻訳ユーティリティを使用するコンポーネントが含まれます。
`projectId?`	General Translation クラウドサービスに必要なプロジェクトID。
`id?`	クライアントに送信されるデータを制限するためのネストされた辞書のID。大規模なプロジェクトで広範な辞書がある場合に便利です。
`dictionary?`	プロジェクトの翻訳辞書。
`locales?`	プロジェクトの承認されたロケールのリスト。
`defaultLocale?`	他のロケールが見つからない場合に使用するデフォルトのロケール。
`locale?`	すでに設定されている場合の現在のロケール。
`cacheUrl?`	翻訳を取得するためのキャッシュサービスのURL。
`runtimeUrl?`	翻訳を取得するためのランタイムサービスのURL。
`renderSettings?`	翻訳をレンダリングするための設定。
`_versionId?`	翻訳を取得するためのバージョンID。
`devApiKey?`	開発環境用のAPIキー。
`metadata?`	コンテキストに渡す追加のメタデータ。

戻り値

このコンポーネントに渡された子要素を含むReact.JSX.Element|undefined。

例

基本的な使用方法

アプリケーションを<GTProvider>でラップして、アプリに翻訳機能を追加します。翻訳を有効にするために、サポートされているロケールのリストを追加することを忘れないでください。

index.js

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']}> // Enable Spanish and French // [!code highlight]
      <App />
    </GTProvider> // [!code highlight]
  </StrictMode>
);

設定の追加

<GTProvider>コンポーネントに直接propsを渡すのが好みでない場合は、設定ファイルを作成してコンポーネントに渡すことができます。また、gtx-cli translateコマンドと直接統合されているため、ロケールなどをパラメータとして手動で指定する必要がありません。

gt.config.json

{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // allows for rolling back to previous translations (autogenerated by the CLI)
}

これを<GTProvider>コンポーネントに渡すだけです。

index.js

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

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider {...config}> // [!code highlight]
      <App />
    </GTProvider>
  </StrictMode>
);

カスタム翻訳ローダー

loadTranslationsプロップを使用して、カスタムソースから翻訳を読み込むことができます。これは、カスタムAPIなど、異なるソースから翻訳を読み込む必要がある場合に便利です。

index.js

import loadTranslations from "./loadTranslations";

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

レンダリング設定

レンダリング設定は翻訳の読み込み動作を制御します。 timeoutとmethodの2つのフィールドがあります。

timeoutは、フォールバックを表示する前に翻訳の読み込みを待つミリ秒数です（デフォルト：8000ms）。
methodは翻訳を読み込むために使用する方法です（"skeleton"、"replace"、または"default"）。

index.js

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

各レンダリング設定は異なる読み込み動作を指定します： "skeleton"は翻訳が読み込まれるまでnullを返します。 "replace"は翻訳が読み込まれるまでフォールバックコンテンツを返します。 "default"は翻訳が読み込まれるまでnullを返しますが、フォールバックロケールが現在のロケールと同じ言語を持つ場合（例：en-USとen-GB）は例外です。この場合、翻訳が読み込まれるまでフォールバックコンテンツを即座に返します。

注意

<GTProvider> は、すべての <T> コンポーネントおよびその他の翻訳関連の関数をラップする必要があります。詳しくはこちらをご覧ください。

次のステップ

テキストとコンポーネントを翻訳するための<T>コンポーネントについて詳しく学ぶ。
翻訳コンポーネントと関数を確認する：<T>、useGT()、またはuseTranslations()。

<GTProvider>

このページについて