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

title: LocaleSelector
description: General Translation gt-react でアクティブなロケールを切り替えるためのドロップダウンを表示します。LocaleSelector の API リファレンスです。

---

`<LocaleSelector>` コンポーネントは、ユーザーがアクティブなロケールを切り替えられるドロップダウンを表示します。これはクライアントサイドのコンポーネントです。

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

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

## 概要 [#overview]

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

```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>` コンテキストのサポート対象ロケールから取得されます。`locales` を指定すると、その一部のみを表示できます。
* **ロケールを切り替えます。** オプションを選択するとアクティブなロケールが設定され、その選択が保持されたうえでページが再読み込みされます。
* **空の場合は何もレンダリングしません。** 利用可能なロケールがない場合、コンポーネントは `null` を返します。

## Props [#props]

| Prop                               | 説明                      | Type       | 任意 | デフォルト        |
| ---------------------------------- | ----------------------- | ---------- | -- | ------------ |
| [`locales`](#locales)              | 表示するロケールの一部。            | `string[]` | はい | サポートされているすべて |
| [`customMapping`](#custom-mapping) | ロケールごとのカスタム表示名またはプロパティ。 | `object`   | はい | —            |

### `locales` [#locales]

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

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

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

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

ロケールコードをカスタムの表示名、絵文字、その他のプロパティに対応付けるマッピングです。*注: 以前の `customNames` prop (シンプルなコードと名前のマップ) は非推奨であり、代わりに `customMapping` を使用してください。*

## 例 [#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) を使用します。