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

{/* 自動生成: 直接編集せず、代わりに content/docs-templates/ 内のテンプレートを編集してください。 */}


## 概要

`<RegionSelector>` コンポーネントは、ユーザーが自分のリージョンを選択するためのドロップダウンです。
これは、[`<GTProvider>` コンテキスト](/docs/react/api/components/gtprovider) からリージョンデータを読み取るクライアントサイド コンポーネントです。

## リファレンス

### 戻り値

ユーザーがリージョンを選択できる `<select>` 要素。利用可能なリージョンがない場合は `null`。

### プロパティ

| Prop                            | 型           | デフォルト   | 説明                                                                                                                         |
| ------------------------------- | ----------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
| `regions`                       | `string[]`  | —       | 表示する ISO 3166 リージョンコード (例: `['US', 'CA', 'GB']`) の任意の配列です。指定しない場合、リージョンは対応ロケールから推定されます。                                    |
| `placeholder`                   | `ReactNode` | —       | リージョンが選択されていない場合に、最初の選択肢として表示する任意のプレースホルダーコンテンツです。                                                                         |
| `customMapping`                 | `object`    | —       | リージョンコードをカスタムの表示名、絵文字、または関連するロケールにマッピングする任意のオブジェクトです。値には、文字列 (表示名) または `name`、`emoji`、`locale` プロパティのいずれかを持つオブジェクトを指定できます。 |
| `prioritizeCurrentLocaleRegion` | `boolean`   | `true`  | true の場合、現在のロケールに対応するリージョンがリスト内で優先されます。                                                                                    |
| `sortRegionsAlphabetically`     | `boolean`   | `true`  | true の場合、リージョンは表示名のアルファベット順に並べ替えられます。                                                                                      |
| `asLocaleSelector`              | `boolean`   | `false` | true の場合、リージョンを選択すると、そのリージョンに関連するロケールにも更新されます。                                                                             |

追加のプロパティは、基になる `<select>` 要素にそのまま渡されます。

## 例

### 基本的な使い方

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

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


### カスタムマッピングとプレースホルダーを使用する場合

```jsx title="CustomRegion.jsx" copy
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: "🇬🇧" },
      }}
    />
  );
}
```

***


## 注意事項

* `<RegionSelector>` コンポーネントはクライアントサイドでのみ利用できます。
* リージョンセレクターの UI を完全にカスタマイズするには、[`useRegionSelector`](/docs/react/api/helpers/use-region-selector) Hook を使用します。

## 次のステップ

* カスタムのリージョンセレクターを作成するには、[`useRegionSelector`](/docs/react/api/helpers/use-region-selector)を参照してください。
* 現在のリージョンを取得するには、[`useRegion`](/docs/react/api/helpers/use-region)を参照してください。
* ロケール版については、[`<LocaleSelector>`](/docs/react/api/components/locale-selector)を参照してください。