# gt-react: General Translation React SDK: GTProvider
URL: https://generaltranslation.com/ja/docs/react/api/components/gtprovider.mdx
---
title: GTProvider
description: GTProvider コンポーネントのAPIリファレンス
---

## 概要

`<GTProvider>` コンポーネントは、子コンポーネントに General Translation (GT) のコンテキストを提供し、翻訳されたコンテンツにアクセスできるようにします。
アプリケーションでクライアントサイドの翻訳を行うには、このコンポーネントが必須です。

### 使用するタイミング

* クライアントサイドで翻訳を有効にするには、アプリケーション全体を `<GTProvider>` でラップします。

* `<GTProvider>` コンポーネントは、[インライン `<T>`](/docs/react/guides/t) と [辞書](/docs/react/guides/dictionaries) の両方で使用します。

## リファレンス

### プロパティ

<TypeTable
  type={{
children: {
type: 'ReactNode',
optional: false,
},
projectId: {
type: 'string',
optional: true,
},
'dictionary?': {
type: 'Dictionary',
optional: true,
default: 'defaultDictionary',
},
'locales?': {
type: 'string[]',
optional: true,
},
'defaultLocale?': {
type: 'string',
optional: true,
default: 'libraryDefaultLocale',
},
'locale?': {
type: 'string',
optional: true,
},
'cacheUrl?': {
type: 'string',
optional: true,
default: "'https://cdn.gtx.dev'",
},
'runtimeUrl?': {
type: 'string',
optional: true,
default: "'https://runtime.gtx.dev'",
},
'renderSettings?': {
type: 'RenderSettings',
optional: true,
default: 'defaultRenderSettings',
},
'_versionId?': {
type: 'string',
optional: true,
},
'devApiKey?': {
type: 'string',
optional: true,
},
'config?': {
type: 'object',
optional: true,
},
'loadTranslations?': {
type: '(locale: string) => Promise<Record<string, any>>',
optional: true,
},
'loadDictionary?': {
type: '(locale: string) => Promise<Record<string, any>>',
optional: true,
},
'region?': {
type: 'string',
optional: true,
},
'fallback?': {
type: 'ReactNode',
optional: true,
},
'customMapping?': {
type: 'CustomMapping',
optional: true,
},
'enableI18n?': {
type: 'boolean',
optional: true,
default: 'true',
},
}}
/>

### 説明

| Prop                | Description                                                                                                               |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `children`          | クライアントサイドで翻訳を行ったり、翻訳情報にアクセスしたりする必要があるコンポーネント、またはそれらを含む親コンポーネントです。`<T>`、`useGT`、その他の翻訳ユーティリティを使用するコンポーネントを含めてください。         |
| `projectId?`        | General Translation のクラウドサービスで必要となるプロジェクト ID です。                                                                          |
| `dictionary?`       | プロジェクトの翻訳辞書です。                                                                                                            |
| `locales?`          | プロジェクトで承認されているロケールの一覧です。                                                                                                  |
| `defaultLocale?`    | 他のロケールが見つからない場合に使用するデフォルトのロケールです。                                                                                         |
| `locale?`           | すでに設定されている場合の現在のロケールです。                                                                                                   |
| `cacheUrl?`         | 翻訳の取得に使用するキャッシュサービスの URL です。                                                                                              |
| `runtimeUrl?`       | 翻訳の取得に使用する runtime サービスの URL です。                                                                                          |
| `renderSettings?`   | 翻訳のレンダリングに関する設定です。                                                                                                        |
| `_versionId?`       | 翻訳の取得に使用するバージョン ID です。                                                                                                    |
| `devApiKey?`        | 開発環境用の API キーです。                                                                                                          |
| `config?`           | `projectId`、`locales`、`defaultLocale`、その他の設定を含む設定オブジェクト (通常は `gt.config.json` からインポート) です。これらを個別のプロパティとして渡す代わりに使用できます。    |
| `loadTranslations?` | ロケール文字列を受け取り、そのロケールの翻訳オブジェクトを返す非同期関数です。runtime で事前生成された翻訳ファイルを読み込むために使用します。使用方法については [Quickstart](/docs/react) を参照してください。 |
| `loadDictionary?`   | ロケール文字列を受け取り、そのロケールの辞書の翻訳データを返す非同期関数です。                                                                                   |
| `region?`           | ユーザーの地域コード (例: `US`、`GB`) です。地域固有の書式設定に使用します。                                                                             |
| `fallback?`         | 翻訳の読み込み中に表示するカスタムのフォールバックコンテンツです。                                                                                         |
| `customMapping?`    | 翻訳済みの JSX をレンダリングする際に使用する、カスタムコンポーネント名から対応する React コンポーネントへのマッピングです。                                                      |
| `enableI18n?`       | i18n 機能を有効にするかどうかです。デフォルトは `true` です。                                                                                     |

### 戻り値

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

## 例

### 基本的な使い方

アプリに翻訳機能を追加するには、アプリケーションを `<GTProvider>` でラップします。
翻訳を有効にするには、[サポートされているロケールの一覧](/docs/platform/supported-locales) も忘れずに追加してください。

```jsx title="index.js" copy
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`](/docs/react/api/dictionary/use-translations)フックから参照することもできます。

```jsx title="index.js" copy
import dictionary from "./dictionary.js";

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

辞書の使い方について詳しくは、こちらの[ガイド](/docs/react/guides/dictionaries)を参照してください。


### 設定の追加

プロパティを直接 `<GTProvider>` コンポーネントに渡したくない場合は、設定ファイルを作成してそれをコンポーネントに渡せます。
また、[`gt translate` コマンド](/docs/cli/translate) とも直接連携するため、ロケールなどをパラメータとして手動で指定する必要はありません。

```json title="gt.config.json" copy
{
  "projectId": "your-project-id",
  "locales": ["es", "fr"],
  "defaultLocale": "en-US",
  "_versionId": "translation-version-id" // 以前の翻訳へのロールバックに使用（CLIによって自動生成）
}
```

あとは、これを `<GTProvider>` コンポーネントに渡すだけです。

```jsx title="index.js" copy
import config from "../gt.config.json";

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


### カスタム翻訳ローダー

`loadTranslations` プロパティを使うと、カスタムの取得元から翻訳を読み込めます。
これは、独自の API など、別の取得元から翻訳を読み込む必要がある場合に便利です。

```jsx title="index.js" copy
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"`) 。

```jsx title="index.js" copy
<GTProvider renderSettings={{ method: 'skeleton', timeout: 1000 }}>
  <App />
</GTProvider>
```

各レンダー設定では、読み込み時の挙動が異なります。
`"skeleton"` は、翻訳が読み込まれるまで `null` を返します。
`"replace"` は、翻訳が読み込まれるまでフォールバックコンテンツを返します。
`"default"` は、フォールバック ロケールの言語が現在のロケールと同じ場合 (たとえば `en-US` と `en-GB`) を除き、翻訳が読み込まれるまで `null` を返します。
この場合は、翻訳が読み込まれるまで、ただちにフォールバックコンテンツを返します。

***


## 注意事項

* `<GTProvider>` で、すべての [`<T>` コンポーネント](/docs/react/api/components/t) とその他の翻訳関連の関数を囲む必要があります。詳しくは[こちら](/docs/react/api/components/gtprovider)をご覧ください。

## 次のステップ

* テキストやコンポーネントの翻訳に使う[`<T>` コンポーネント](/docs/react/guides/t)について詳しく確認してください。