# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<LocaleSelector>`
URL: https://generaltranslation.com/ja/docs/react/reference/components/locale-selector.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: アクティブなロケールを切り替えるためのドロップダウンを表示します。`<LocaleSelector>` コンポーネントの API リファレンスです。

`<LocaleSelector>` コンポーネントは、アプリで設定されたロケールを表示する、あらかじめ用意されたクライアントサイドのドロップダウンです。これにより、独自に実装しなくても動作する言語切り替え機能を追加できます。

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

*注: `gt-react-native` からは export されません。カスタムセレクターを作成する場合は、[`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) を使用してください。*

## 概要 [#overview]

クライアントコンポーネント内の任意の場所に `<LocaleSelector>` を配置できます。props を指定しない場合は、設定されているロケールの一覧が表示されます。

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

```tsx
import { LocaleSelector } from 'gt-react';

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

*注: `<LocaleSelector>` はクライアントサイドでのみ使用できます。完全にカスタマイズした切り替え機能を実装するには、[`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) フックを使用してください。*

## 動作の仕組み [#how-it-works]

* **コンテキストを参照します。** デフォルトでは、オプションは [`<GTProvider>`](/docs/react/reference/components/gt-provider) コンテキストのサポート対象ロケールから取得されます。`locales` を指定すると、その一部のみを表示できます。
* **ロケールを切り替えます。** オプションを選択するとアクティブなロケールが保持され、フレームワークの更新、再読み込み、またはナビゲーション動作が適用されます。[ロケールの管理](/docs/react/guides/managing-locales#persistence)を参照してください。
* **空の場合は何もレンダリングしません。** 利用可能なロケールがない場合、コンポーネントは `null` を返します。

## Props [#props]

| Prop                               | 説明                         | 型                                                  | 任意 | デフォルト        |
| ---------------------------------- | -------------------------- | ----------------------------------------------------- | -- | ------------ |
| [`locales`](#locales)              | 表示するロケールの一部。               | `string[]`                                            | はい | サポートされているすべて |
| [`customMapping`](#custom-mapping) | ロケールのカスタムオプションラベル。         | `Record<string, string \| Partial<LocaleProperties>>` | はい | —            |
| [`customNames`](#custom-names)     | 非推奨のコードからラベルへのマッピング。       | `Record<string, string>`                              | はい | —            |
| [Select の属性](#select-attributes)    | 基になる `<select>` に渡される標準属性。 | `React.SelectHTMLAttributes<HTMLSelectElement>`       | はい | —            |

### `locales` [#locales]

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

`['en', 'es-MX', 'fr']` のように、ドロップダウンに表示するロケールコードの一部を指定します。省略した場合は、[`<GTProvider>`](/docs/react/reference/components/gt-provider) の コンテキスト に含まれる `locales` が使用されます。

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

**型** `Record<string, string | Partial<LocaleProperties>>` · **任意**

ロケールコードをカスタムのオプションラベルに対応付けるマッピングです。文字列値はそのまま使用され、オブジェクト値では [`LocaleProperties`](/docs/platform/core/reference/types/locale-properties) の `name` プロパティが使用されます。その他のロケールプロパティは、表示されるラベルに影響しません。

### `customNames` [#custom-names]

**型** `Record<string, string>` · **任意** · **非推奨**

互換性のために残されている、コードとラベルを対応付ける旧式のマッピングです。代わりに `customMapping` を使用してください。両方のpropsが指定されている場合は、`customMapping` が優先されます。

### Select の属性 [#select-attributes]

`className`、`disabled`、`aria-describedby` などの標準的な `<select>` 属性は、レンダリングされた要素に渡されます。コンポーネントが `value` と `onChange` を制御するため、オプションを選択するとアクティブなロケールが更新されます。

## 例 [#examples]

```tsx
import { LocaleSelector } from 'gt-react';

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

```tsx
import { LocaleSelector } from 'gt-react';

export default function MyComponent() {
  const customMapping = {
    en: 'English',
    es: 'Español',
    'fr-CA': 'Français (Canada)',
  };
  return <LocaleSelector customMapping={customMapping} />;
}
```

## メモ [#notes]

* `<LocaleSelector>` はクライアントサイドでのみ使用できます。
* アクティブなロケールを取得するには [`useLocale`](/docs/react/reference/hooks/use-locale) を使用し、カスタムセレクターを作成するには [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) を使用します。

## Sitemap

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