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

{/* 自動生成: 直接編集しないでください。代わりに content/docs-templates/ 内の template を編集してください。 */}


## 概要

`<RegionSelector>` コンポーネントは、ユーザーが自分のリージョンを選択できるドロップダウンメニューです。
これは、[`<GTProvider>` コンテキスト](/docs/next/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-next';

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


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

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

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/next/api/helpers/use-region-selector) Hook を使用してください。

## 次のステップ

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