# react-native: useRegionSelector
URL: https://generaltranslation.com/ja/docs/react-native/api/helpers/use-region-selector.mdx
---
title: useRegionSelector
description: useRegionSelector Hook のAPIリファレンス
---

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


## 概要

`useRegionSelector` Hook は、カスタムのリージョンセレクター UI コンポーネントの実装に必要なデータとハンドラーを提供します。現在のリージョン、利用可能なリージョンの一覧、リージョンのメタデータ、さらにリージョンまたはロケールを更新する関数を返します。

<Callout>
  `useRegionSelector` はクライアント Hook であり、*クライアント コンポーネントでのみ使用できます*。
  アプリが [`<GTProvider>`](/docs/react-native/api/components/gtprovider) でラップされていることを確認してください。
</Callout>

## リファレンス

### パラメータ

省略可能な設定オブジェクト:

| パラメータ                           | 型          | デフォルト  | 説明                                                                                                                         |
| ------------------------------- | ---------- | ------ | -------------------------------------------------------------------------------------------------------------------------- |
| `regions`                       | `string[]` | —      | 表示する ISO 3166 のリージョンコードの配列 (省略可) 。指定しない場合、リージョンはサポート対象のロケールから推定されます。                                                       |
| `customMapping`                 | `object`   | —      | リージョンの表示名、絵文字、または関連付けられたロケールを上書きするためのマッピング (省略可) 。値には、文字列 (表示名) か、`name`、`emoji`、`locale` の各プロパティの一部または全部を持つオブジェクトを指定できます。 |
| `prioritizeCurrentLocaleRegion` | `boolean`  | `true` | `true` の場合、現在のロケールに対応するリージョンがリスト内で優先されます。                                                                                  |
| `sortRegionsAlphabetically`     | `boolean`  | `true` | `true` の場合、リージョンは表示名のアルファベット順で並べ替えられます。                                                                                    |

### 戻り値

次のプロパティを含むオブジェクトです。

| フィールド        | 型                                       | 説明                                                                |
| ------------ | --------------------------------------- | ----------------------------------------------------------------- |
| `region`     | `string \| undefined`                   | 現在選択されているリージョンコード。                                                |
| `setRegion`  | `(region: string \| undefined) => void` | 選択中のリージョンを更新する関数。                                                 |
| `regions`    | `string[]`                              | 利用可能なリージョンコードの配列。                                                 |
| `regionData` | `Map<string, RegionData>`               | リージョンコードと、その表示用データ (`code`、`name`、`emoji`、`locale`) の対応を保持する Map。 |
| `locale`     | `string`                                | 現在のロケール。                                                          |
| `setLocale`  | `(locale: string) => void`              | ロケールを更新する関数。                                                      |

***

## 例

### カスタムのリージョンセレクターを作成する

```jsx title="CustomRegionSelector.jsx" copy
'use client';
import { useRegionSelector } from 'gt-react-native';

export default function CustomRegionSelector() {
  const { region, setRegion, regions, regionData } = useRegionSelector({ // [!code highlight]
    customMapping: { US: { name: "United States", emoji: "🇺🇸" } }, // [!code highlight]
  }); // [!code highlight]

  return (
    <select value={region} onChange={(e) => setRegion(e.target.value)}>
      {regions.map((r) => (
        <option key={r} value={r}>
          {regionData.get(r)?.emoji} {regionData.get(r)?.name}
        </option>
      ))}
    </select>
  );
}
```

***


## 注意事項

* `regions` が指定されていない場合、利用可能なリージョンは [`gt.config.json`](/docs/react-native/api/config/gt-config-json) で設定されたサポート対象のロケールから推定されます。
* あらかじめ用意されたリージョンセレクターを使用する場合は、[`<RegionSelector>`](/docs/react-native/api/components/region-selector) コンポーネントを使ってください。

## 次のステップ

* すぐに使えるドロップダウンコンポーネントについては、[`<RegionSelector>`](/docs/react-native/api/components/region-selector)を参照してください。
* 現在のリージョンを取得するには、[`useRegion`](/docs/react-native/api/helpers/use-region)を参照してください。
* ロケール版については、[`useLocaleSelector`](/docs/react-native/api/helpers/use-locale-selector)を参照してください。