# gt-react: General Translation React SDK: LocaleSelector
URL: https://generaltranslation.com/ja/docs/react/api/components/locale-selector.mdx
---
title: LocaleSelector
description: LocaleSelector コンポーネントの API リファレンス
---

{/* 自動生成: 直接編集せず、代わりに content/docs-templates/ 内のテンプレートを編集してください。 */}


## 概要

`<LocaleSelector>` コンポーネントは、ユーザーのロケールを選択するために使用するコンポーネントです。
クライアントサイドのコンポーネントで、ロケールを選択するためのドロップダウンを提供します。

## リファレンス

### 戻り値

ユーザーがロケールを選択するためのコンポーネントです。

### Props

* **`locales`** (optional): `string[]`
  * ドロップダウンに表示するロケールのリスト (例: `['en', 'es-MX', 'fr']`) を任意で指定できます。指定しない場合は、`<GTProvider>` コンテキスト内のロケール一覧が使用されます。
* **`customNames`** (optional): `{[locale: string]: string}`
  * ロケールコードをカスタムの表示名にマッピングするための任意のオブジェクトです。
  * 例: `{{ 'en-US': 'English (United States)', 'es': 'Español' }}`

## 例

### 基本的な使い方

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

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


### `customNames` を使う場合

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

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

***


## 注意

* `<LocaleSelector>` コンポーネントを使用すると、アプリで別のロケールを選択できます。
* `<LocaleSelector>` コンポーネントはサーバーコンポーネントでは使用できません。

## 次のステップ

* [`useLocale`](/docs/react/api/helpers/use-locale) フックの詳細を確認してください。
* カスタムのロケールセレクターを定義するには、[`useLocaleSelector`](/docs/react/api/helpers/use-locale-selector) フックを参照してください。
* [ロケール文字列](/docs/core/locales) の詳細を確認してください。