# General Translation React SDKs (gt-react, gt-next): RegionSelector
URL: https://generaltranslation.com/ja/docs/react/reference/components/region-selector.mdx
---

title: RegionSelector
description: General Translation gt-react でアクティブなリージョンを切り替えるためのドロップダウンをレンダリングします。RegionSelector の API リファレンス。

---

`<RegionSelector>` コンポーネントは、ユーザーがアクティブなリージョンを切り替えられるドロップダウンをレンダリングします。これはクライアントサイドのコンポーネントで、[`<GTProvider>`](/docs/react/reference/components/gt-provider) コンテキストからリージョンデータを読み取ります。

*`gt-react` と `gt-next` で利用できます。例では `gt-react` からインポートしていますが、代わりに使用しているフレームワークのパッケージからインポートしてください。*

*注: `gt-tanstack-start` および `gt-react-native` ではエクスポートされていません。*

## 概要 [#overview]

プロバイダー内で `<RegionSelector>` をレンダリングします。props を指定しない場合は、サポート対象の locales からリージョンを推測します。

```tsx
import { RegionSelector } from 'gt-react';

export default function MyComponent() {
  return <RegionSelector />;
}
```

*注: `<RegionSelector>` はクライアントサイド専用で、`<select>` 要素 (利用可能なリージョンがない場合は `null`) をレンダリングします。完全にカスタマイズされたスイッチャーが必要な場合は、[`useRegionSelector`](/docs/react/reference/hooks/use-region-selector) フックを使用してください。*

## 仕組み [#how-it-works]

* **context を読み取ります。** デフォルトでは、リージョンは `<GTProvider>` の context でサポートされている locales から推測されます。特定のセットを表示するには、`regions` を指定してください。
* **リージョンを切り替えます。** オプションを選択すると、アクティブなリージョンが設定されます。`asLocaleSelector` を使用すると、ロケールもそのリージョンに関連付けられたものに更新されます。
* **props をそのまま渡します。** 追加の props はすべて、基になる `<select>` 要素に渡されます。

## Props [#props]

| Prop                                           | 説明                                         | Type        | 任意 | デフォルト   |
| ---------------------------------------------- | ------------------------------------------ | ----------- | -- | ------- |
| [`regions`](#regions)                          | 表示する ISO 3166 リージョンコードのサブセット。              | `string[]`  | はい | 自動判定    |
| [`placeholder`](#placeholder)                  | 先頭の選択肢に表示するプレースホルダー。                       | `ReactNode` | はい | —       |
| [`customMapping`](#custom-mapping)             | リージョンごとの表示名、絵文字、または locales のカスタム mapping。 | `object`    | はい | —       |
| [`prioritizeCurrentLocaleRegion`](#prioritize) | 現在のロケールのリージョンを先頭に表示します。                    | `boolean`   | はい | `true`  |
| [`sortRegionsAlphabetically`](#sort)           | 表示名でリージョンをアルファベット順に並べ替えます。                 | `boolean`   | はい | `true`  |
| [`asLocaleSelector`](#as-locale-selector)      | リージョンを選択したときにロケールも更新します。                   | `boolean`   | はい | `false` |

### `regions` [#regions]

**型** `string[]` · **省略可能** · **デフォルト** 自動推定

表示する ISO 3166 のリージョンコードの配列です (`['US', 'CA', 'GB']` など) 。省略した場合、リージョンはサポート対象の locales から自動的に推定されます。

### `placeholder` [#placeholder]

**型** `ReactNode` · **任意**

リージョンが未選択のときに、最初の選択肢として表示されるプレースホルダーの内容。

### `customMapping` [#custom-mapping]

**型** `object` · **任意**

リージョンコードをカスタムの表示データに対応付けるマッピングです。各値には、string (表示名) 、または `name`、`emoji`、および/または `locale` プロパティを持つオブジェクトを指定できます。

### `prioritizeCurrentLocaleRegion` [#prioritize]

**Type** `boolean` · **任意** · **デフォルト** `true`

`true` の場合、現在のロケールに一致するリージョンが一覧の先頭に優先的に表示されます。

### `sortRegionsAlphabetically` [#sort]

**型** `boolean` · **任意** · **デフォルト** `true`

`true` の場合、リージョンは表示名のアルファベット順で並び替えられます。

### `asLocaleSelector` [#as-locale-selector]

**型** `boolean` · **任意** · **デフォルト** `false`

`true` の場合、リージョンを選択すると、そのリージョンに対応するロケールにも更新されます。

## 例 [#examples]

```tsx title="MyComponent.tsx"
import { RegionSelector } from 'gt-react';

export default function MyComponent() {
  return <RegionSelector />;
}
```

```tsx title="CustomRegion.tsx"
import { RegionSelector } from 'gt-react';

export default function CustomRegion() {
  return (
    <RegionSelector
      regions={['US', 'CA', 'GB']}
      placeholder="Select a region"
      customMapping={{
        US: { name: 'United States', emoji: '🇺🇸' },
        CA: { name: 'Canada', emoji: '🇨🇦' },
        GB: { name: 'United Kingdom', emoji: '🇬🇧' },
      }}
    />
  );
}
```

## メモ [#notes]

* `<RegionSelector>` はクライアントサイドでのみ使用できます。
* 現在のリージョンを取得するには [`useRegion`](/docs/react/reference/hooks/use-region) を使用し、カスタムセレクターを作成するには [`useRegionSelector`](/docs/react/reference/hooks/use-region-selector) を使用します。
* ロケール版については、[`<LocaleSelector>`](/docs/react/reference/components/locale-selector) を参照してください。