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

## 概要

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

### 使用する場面

* クライアント側で翻訳を有効にするには、アプリケーション全体を `<GTProvider>` でラップします。
* `<GTProvider>` コンポーネントは、[インライン `<T>`](/docs/react-native/guides/t) と [辞書](/docs/react-native/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,
},
}}
/>

### 説明

| 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` からインポート) です。これらを個別の props として渡す代わりに使用できます。 |
| `loadTranslations?` | ロケール文字列を受け取り、そのロケール用の翻訳オブジェクトを返す非同期関数です。Runtime で事前生成された翻訳ファイルを読み込むために使用します。                                             |
| `loadDictionary?`   | ロケール文字列を受け取り、そのロケール用の辞書の翻訳を返す非同期関数です。                                                                                    |
| `region?`           | ユーザーの地域コード (例: `US`、`GB`) です。地域固有の書式設定に使用します。                                                                            |
| `fallback?`         | 翻訳の読み込み中に表示するカスタムのフォールバックコンテンツです。                                                                                        |
| `customMapping?`    | カスタムコンポーネント名と対応する React コンポーネントのマッピングで、翻訳された JSX のレンダリング時に使用します。                                                         |

### 戻り値

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

## 例

### 基本的な使い方

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

```jsx title="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import gtConfig from './gt.config.json';
import { loadTranslations } from './loadTranslations';

export default function App() {
  return (
    <GTProvider config={gtConfig} loadTranslations={loadTranslations}> {/* // [!code highlight] */}
      {/* アプリのコンテンツ */}
    </GTProvider>
  );
}
```

### 辞書

辞書を`<GTProvider>`コンポーネントに渡して、[`useTranslations`](/docs/react-native/api/dictionary/use-translations)フックからアクセスすることもできます。

```jsx title="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import gtConfig from './gt.config.json';
import { loadTranslations } from './loadTranslations';
import dictionary from './dictionary';

export default function App() {
  return (
    <GTProvider config={gtConfig} loadTranslations={loadTranslations} dictionary={dictionary}> {/* // [!code highlight] */}
      {/* アプリのコンテンツ */}
    </GTProvider>
  );
}
```

辞書の使い方について詳しくは、こちらの[ガイド](/docs/react-native/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="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import config from './gt.config.json';

export default function App() {
  return (
    <GTProvider {...config}> {/* // [!code highlight] */}
      {/* アプリのコンテンツ */}
    </GTProvider>
  );
}
```

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

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

```jsx title="App.tsx" copy
import { GTProvider } from 'gt-react-native';
import { loadTranslations } from './loadTranslations';

export default function App() {
  return (
    <GTProvider locales={['es', 'fr']} loadTranslations={loadTranslations}> {/* // [!code highlight] */}
      {/* Your app content */}
    </GTProvider>
  );
}
```

### レンダリング設定

レンダリング設定では、翻訳の読み込み動作を制御します。
設定項目は `timeout` と `method` の 2 つです。

* `timeout` は、フォールバックを表示するまでに翻訳の読み込みを待機する時間をミリ秒で指定します (デフォルト: `8000ms`) 。
* `method` は、翻訳の読み込みに使用する方式です (`"skeleton"`、`"replace"`、または `"default"`) 。

```jsx title="App.tsx" copy
<GTProvider renderSettings={{ method: 'skeleton', timeout: 1000 }}>
  {/* アプリのコンテンツ */}
</GTProvider>
```

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

***

## 注記

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

## 次のステップ

* テキストやコンポーネントの翻訳に使う[`<T>`コンポーネント](/docs/react-native/guides/t)について詳しくは、こちらを参照してください。