# General Translation React SDKs (gt-react, gt-next, gt-react-native): useLocaleSelector
URL: https://generaltranslation.com/ja/docs/react/reference/hooks/use-locale-selector.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: カスタムのロケール切り替え機能を構築します。useLocaleSelector の API リファレンス。

`useLocaleSelector` フック は、カスタムの言語切り替え機能のための構成要素を公開します。アクティブなロケール、利用可能なロケール、ロケールのプロパティを扱うヘルパー、そしてロケールを変更するための setter が含まれます。

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。*

## 概要 [#overview]

`useLocaleSelector` を呼び出し、その値を独自の `<select>` またはカスタム UI に組み込みます。

*例では `gt-react` からインポートしていますが、代わりにフレームワークのパッケージからインポートしてください。*

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

export default function MySelector() {
  const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      {locales.map((l) => (
        <option key={l} value={l}>
          {getLocaleProperties(l).nativeNameWithRegionCode}
        </option>
      ))}
    </select>
  );
}
```

*注: `useLocaleSelector` はクライアントサイドでのみ利用できます。カスタムUIが不要な場合は、代わりに [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) コンポーネントを使用してください。*

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

このフックは、セレクターに必要なものをすべて提供します。具体的には、現在の `locale`、`locales` の一覧、それを変更するための `setLocale`、そして表示名を表示するための `getLocaleProperties` です。選択肢を絞り込むには、ロケールの部分集合を渡してください。ロケール変更時の動作はフレームワークによって異なります。詳細は[ロケールの管理](/docs/react/guides/managing-locales#persistence)を参照してください。

## パラメーター [#parameters]

| パラメーター                | 説明           | 型          | 任意 | デフォルト        |
| --------------------- | ------------ | ---------- | -- | ------------ |
| [`locales`](#locales) | 提供するロケールの一部。 | `string[]` | はい | サポートされているすべて |

### `locales` [#locales]

**型** `string[]` · **任意** · **デフォルト** サポートされているすべて

提供するサポート対象ロケールの部分集合を指定します。このフックは、明示的に指定された配列の順序を保持します。省略した場合は、[`<GTProvider>`](/docs/react/reference/components/gt-provider) コンテキストのロケールをネイティブ表示名で並べ替えます。

## 戻り値 [#returns]

**型** `object`

| フィールド                 | 説明                                       | 型                                      |
| --------------------- | ---------------------------------------- | -------------------------------------- |
| `locale`              | 現在選択中のロケール。                              | `string`                               |
| `locales`             | 利用可能なロケール。                               | `string[]`                             |
| `setLocale`           | アクティブなロケールを変更します。                        | `(locale: string) => void`             |
| `getLocaleProperties` | 設定済みのカスタムマッピングを使用して、ロケールの表示用メタデータを取得します。 | `(locale: string) => LocaleProperties` |

## メモ [#notes]

* `useLocaleSelector` はクライアントサイドでのみ利用できます。
* すぐに使えるドロップダウンには、[`<LocaleSelector>`](/docs/react/reference/components/locale-selector) を使用してください。

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.