# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<LocaleSelector>`
URL: https://generaltranslation.com/ru/docs/react/reference/components/locale-selector.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Отображает выпадающий список для переключения активной локали. Справочник по API для компонента `<LocaleSelector>`.

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

*Доступно в `gt-react`, `gt-next` и `gt-tanstack-start`.*

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

## Обзор [#overview]

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

*В примерах используется импорт из `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]

| Пропс                                 | Описание                                                | Тип                                                   | Необязательный | По умолчанию       |
| ------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------- | -------------- | ------------------ |
| [`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']`. Если параметр не указан, используются `locales` из контекста [`<GTProvider>`](/docs/react/reference/components/gt-provider).

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

**Тип** `Record<string, string | Partial<LocaleProperties>>` · **Необязательно**

Сопоставление кодов локалей с пользовательскими подписями вариантов. Строковые значения используются напрямую; для объектов используется свойство `name` из [`LocaleProperties`](/docs/platform/core/reference/types/locale-properties). Другие свойства локали не влияют на отображаемую подпись.

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

**Тип** `Record<string, string>` · **Необязательный** · **Устаревший**

Устаревшее сопоставление кодов с подписями, сохранённое для обратной совместимости. Используйте `customMapping`. Если переданы оба пропса, приоритет имеет `customMapping`.

### Атрибуты Select [#select-attributes]

Стандартные атрибуты `<select>`, такие как `className`, `disabled` и `aria-describedby`, передаются отрисовываемому элементу. Компонент управляет `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.