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

title: LocaleSelector
description: Отображает выпадающий список для переключения активной локали с помощью General Translation gt-react. Справочник по API для LocaleSelector.

---

Компонент `<LocaleSelector>` отображает выпадающий список, позволяющий пользователям переключать активную локаль. Это компонент, работающий на стороне клиента.

*Доступно в `gt-react`, `gt-next` и `gt-tanstack-start`. В примерах используется импорт из `gt-react`; вместо этого импортируйте из пакета вашего фреймворка.*

*Примечание: не экспортируется из `gt-react-native`. Для пользовательского селектора используйте [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector).*

## Обзор [#overview]

Разместите `<LocaleSelector>` в любом клиентском компоненте. Если не передавать пропсы, он отображает список настроенных локалей.

```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]

| Пропс                              | Описание                                                  | Тип        | Необязательный | По умолчанию       |
| ---------------------------------- | --------------------------------------------------------- | ---------- | -------------- | ------------------ |
| [`locales`](#locales)              | Подмножество локалей для отображения.                     | `string[]` | Да             | Все поддерживаемые |
| [`customMapping`](#custom-mapping) | Пользовательские отображаемые имена или свойства локалей. | `object`   | Да             | —                  |

### `locales` [#locales]

**Тип** `string[]` · **Необязательно** · **По умолчанию** Все поддерживаемые

Подмножество кодов локалей для отображения в выпадающем списке, например `['en', 'es-MX', 'fr']`. Если параметр не указан, используются `locales` из контекста `<GTProvider>`.

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

**Тип** `object` · **Необязательное**

Сопоставление кодов локалей с пользовательскими отображаемыми именами, эмодзи и другими свойствами. *Примечание: устаревший проп `customNames` (простое сопоставление кодов и имён) заменён на `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).