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

title: useLocaleSelector
description: General Translation gt-react でカスタムのロケール切り替え機能を構築します。useLocaleSelector の API リファレンス。

---

`useLocaleSelector` hook は、カスタムのロケール切り替え機能の構築に必要な状態を返します。アクティブなロケール、利用可能なロケール、ロケールのプロパティを扱うヘルパー、そして setter が含まれます。

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

## 概要 [#overview]

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

```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` です。選択肢を絞り込むには、ロケールのサブセットを渡してください。

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

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

### `locales` [#locales]

**型** `string[]` · **任意** · **デフォルト** すべてのサポート対象

提供するサポート対象ロケールの一部を指定します。省略した場合は、`<GTProvider>` コンテキストのロケールが使用されます。

## 戻り値 [#returns]

**型** `object`

| フィールド                 | 説明                   | 型                                      |
| --------------------- | -------------------- | -------------------------------------- |
| `locale`              | 現在選択中のロケール。          | `string`                               |
| `locales`             | 利用可能なロケール。           | `string[]`                             |
| `setLocale`           | アクティブなロケールを変更します。    | `(locale: string) => void`             |
| `getLocaleProperties` | ロケールの表示用メタデータを取得します。 | `(locale: string) => LocaleProperties` |

## メモ [#notes]

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