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

title: useRegionSelector
description: General Translation の gt-react を使って、カスタムのリージョン切り替えを構築します。useRegionSelector の API リファレンス。

---

`useRegionSelector` フックは、カスタムのリージョンセレクターを構築するために必要なデータとハンドラーを返します。アクティブなリージョン、利用可能なリージョン、リージョンのメタデータ、そしてリージョンまたはロケールを更新する関数が含まれます。

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

*注: `gt-next` または `gt-tanstack-start` からは export されません。*

## 概要 [#overview]

`useRegionSelector` を呼び出し、その値を独自の UI に組み込みます。

```tsx
'use client';
import { useRegionSelector } from 'gt-react';

export default function CustomRegionSelector() {
  const { region, setRegion, regions, regionData } = useRegionSelector({ // [!code highlight]
    customMapping: { US: { name: 'United States', emoji: '🇺🇸' } }, // [!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>
  );
}
```

*注: `useRegionSelector` はクライアントサイド専用で、[`<GTProvider>`](/docs/react/reference/components/gt-provider) の配下で使用する必要があります。カスタム UI が不要な場合は、代わりに [`<RegionSelector>`](/docs/react/reference/components/region-selector) コンポーネントを使用してください。*

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

このフックは、アクティブなリージョン、順序付きのリージョン一覧、表示用メタデータを含む `regionData` マップ、そしてリージョンとロケールのセッターを返します。`regions` が指定されていない場合、利用可能なリージョンはサポート対象のロケールから推定されます。

## パラメータ [#parameters]

`useRegionSelector` はオプションの設定オブジェクトを受け取ります。

| パラメータ                                          | 説明                             | 型          | 省略可能 | デフォルト  |
| ---------------------------------------------- | ------------------------------ | ---------- | ---- | ------ |
| [`regions`](#regions)                          | 表示する ISO 3166 リージョンコードの一部。     | `string[]` | はい   | 自動推定   |
| [`customMapping`](#custom-mapping)             | リージョンごとのカスタム表示名、絵文字、またはロケール。   | `object`   | はい   | —      |
| [`prioritizeCurrentLocaleRegion`](#prioritize) | 現在のロケールのリージョンを先頭にします。          | `boolean`  | はい   | `true` |
| [`sortRegionsAlphabetically`](#sort)           | 表示名に基づいてリージョンをアルファベット順に並べ替えます。 | `boolean`  | はい   | `true` |

### `regions` [#regions]

**型** `string[]` · **任意** · **デフォルト** 自動推定

表示する ISO 3166 のリージョンコードです。省略した場合は、サポートされているロケールからリージョンが推定されます。

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

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

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

### `prioritizeCurrentLocaleRegion` [#prioritize]

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

`true` の場合、現在のロケールに対応するリージョンがリスト内で優先されます。

### `sortRegionsAlphabetically` [#sort]

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

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

## 戻り値 [#returns]

**型** `object`

| フィールド          | 説明                                                      | 型                                       |
| -------------- | ------------------------------------------------------- | --------------------------------------- |
| `region`       | 現在選択されているリージョンコード。                                      | `string \| undefined`                   |
| `setRegion`    | 選択中のリージョンを更新します。                                        | `(region: string \| undefined) => void` |
| `regions`      | 利用可能なリージョンコード。                                          | `string[]`                              |
| `regionData`   | リージョンコードから表示データ (`code`、`name`、`emoji`、`locale`) へのマップ。 | `Map<string, RegionData>`               |
| `locale`       | 現在のロケール。                                                | `string`                                |
| `setLocale`    | ロケールを更新します。                                             | `(locale: string) => void`              |
| `localeRegion` | 現在のロケールの ISO 3166 リージョンコード。                             | `string`                                |

## メモ [#notes]

* `useRegionSelector` はクライアントサイドでのみ使用できます。
* すぐに使えるドロップダウンを使う場合は、[`<RegionSelector>`](/docs/react/reference/components/region-selector) を使用してください。
* ロケール版については、[`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) を参照してください。