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

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


## 概要

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

## リファレンス

### 戻り値

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

### プロパティ

| Prop                            | Type        | Default | Description                                                                                                                  |
| ------------------------------- | ----------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `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-native';

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


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

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

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

## 次のステップ

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