<GTProvider>

概要

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

使用するタイミング

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

リファレンス

Props

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

説明

Prop	説明
`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']}> // スペイン語とフランス語を有効にする // [!code highlight]
      <App />
    </GTProvider> // [!code highlight]
  </StrictMode>
);

辞書

辞書を <GTProvider> コンポーネントに渡し、その後 useDict() フックでアクセスすることもできます。

index.js

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 コマンドと直接統合されているため、ロケールなどを手動でパラメータとして指定する必要はありません。

gt.config.json

{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // 以前の翻訳にロールバックすることを可能にする（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>
);

メモ

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

次のステップ

テキストとコンポーネントを翻訳するための <T> コンポーネントについてもっと学びましょう。
翻訳コンポーネントと関数をチェックしてください: <T>, useGT(), または useDict()。

<GTProvider>

このページについて