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

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

---

Компонент `<RegionSelector>` отображает выпадающий список, который позволяет пользователям переключать активный регион. Это компонент на стороне клиента, который считывает данные о регионе из контекста [`<GTProvider>`](/docs/react/reference/components/gt-provider).

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

*Примечание: не экспортируется из `gt-tanstack-start` и `gt-react-native`.*

## Обзор [#overview]

Разместите `<RegionSelector>` внутри вашего provider-компонента. Без пропсов он определяет регионы по поддерживаемым локалям.

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

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

*Примечание: `<RegionSelector>` работает только на стороне клиента и рендерит элемент `<select>` (или `null`, если нет доступных регионов). Для полностью настраиваемого переключателя используйте хук [`useRegionSelector`](/docs/react/reference/hooks/use-region-selector).*

## Как это работает [#how-it-works]

* **Учитывает контекст.** По умолчанию регионы определяются на основе поддерживаемых локалей в контексте `<GTProvider>`. Передайте `regions`, чтобы показать конкретный набор.
* **Переключает регион.** При выборе варианта устанавливается активный регион. С `asLocaleSelector` также обновляется локаль на связанную с регионом локаль.
* **Сквозные пропсы.** Любые дополнительные пропсы передаются во внутренний элемент `<select>`.

## Props [#props]

| Prop                                           | Описание                                                          | Type        | Необязательно | По умолчанию               |
| ---------------------------------------------- | ----------------------------------------------------------------- | ----------- | ------------- | -------------------------- |
| [`regions`](#regions)                          | Подмножество кодов регионов ISO 3166, которые нужно отображать.   | `string[]`  | Да            | Определяется автоматически |
| [`placeholder`](#placeholder)                  | Содержимое плейсхолдера для первого варианта.                     | `ReactNode` | Да            | —                          |
| [`customMapping`](#custom-mapping)             | Пользовательские названия, эмодзи или локали для каждого региона. | `object`    | Да            | —                          |
| [`prioritizeCurrentLocaleRegion`](#prioritize) | Поместить регион текущей локали на первое место.                  | `boolean`   | Да            | `true`                     |
| [`sortRegionsAlphabetically`](#sort)           | Сортировать регионы по отображаемым именам в алфавитном порядке.  | `boolean`   | Да            | `true`                     |
| [`asLocaleSelector`](#as-locale-selector)      | Также обновлять локаль при выборе региона.                        | `boolean`   | Да            | `false`                    |

### `regions` [#regions]

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

Массив кодов регионов по стандарту ISO 3166, которые будут отображаться, например `['US', 'CA', 'GB']`. Если параметр не указан, регионы определяются на основе поддерживаемых локалей.

### `placeholder` [#placeholder]

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

Содержимое плейсхолдера, которое отображается первым вариантом, если регион не выбран.

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

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

Сопоставление кодов регионов с пользовательскими данными отображения. Каждое значение может быть строкой (отображаемое название) или объектом со свойствами `name`, `emoji` и/или `locale`.

### `prioritizeCurrentLocaleRegion` [#prioritize]

**Тип** `boolean` · **Необязательный** · **По умолчанию** `true`

Если `true`, регион, соответствующий текущей локали, перемещается в начало списка.

### `sortRegionsAlphabetically` [#sort]

**Тип** `boolean` · **Необязательно** · **По умолчанию** `true`

Если `true`, регионы сортируются по алфавиту по отображаемому названию.

### `asLocaleSelector` [#as-locale-selector]

**Тип** `boolean` · **Необязательно** · **По умолчанию** `false`

Если `true`, при выборе региона локаль также обновляется на локаль, связанную с этим регионом.

## Примеры [#examples]

```tsx title="MyComponent.tsx"
import { RegionSelector } from 'gt-react';

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

```tsx title="CustomRegion.tsx"
import { RegionSelector } from 'gt-react';

export default function CustomRegion() {
  return (
    <RegionSelector
      regions={['US', 'CA', 'GB']}
      placeholder="Select a region"
      customMapping={{
        US: { name: 'United States', emoji: '🇺🇸' },
        CA: { name: 'Canada', emoji: '🇨🇦' },
        GB: { name: 'United Kingdom', emoji: '🇬🇧' },
      }}
    />
  );
}
```

## Заметки [#notes]

* `<RegionSelector>` работает только на стороне клиента.
* Чтобы получить активный регион, используйте [`useRegion`](/docs/react/reference/hooks/use-region); чтобы создать собственный селектор, используйте [`useRegionSelector`](/docs/react/reference/hooks/use-region-selector).
* Эквивалент для локали см. в [`<LocaleSelector>`](/docs/react/reference/components/locale-selector).