# gt-react: General Translation React SDK: RegionSelector
URL: https://generaltranslation.com/ru/docs/react/api/components/region-selector.mdx
---
title: RegionSelector
description: Справка по API компонента RegionSelector
---

{/* АВТОМАТИЧЕСКИ СГЕНЕРИРОВАНО: Не редактируйте напрямую. Вместо этого редактируйте template в content/docs-templates/. */}


## Обзор

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

## Справка

### Возвращает

Элемент `<select>`, позволяющий пользователю выбрать регион, или `null`, если доступные регионы отсутствуют.

### Пропсы

| Свойство                        | Тип         | По умолчанию | Описание                                                                                                                                                                                                           |
| ------------------------------- | ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `regions`                       | `string[]`  | —            | Необязательный массив кодов регионов ISO 3166 для отображения (например, `['US', 'CA', 'GB']`). Если не указан, регионы определяются на основе поддерживаемых локалей.                                             |
| `placeholder`                   | `ReactNode` | —            | Необязательное содержимое заполнителя, которое отображается первым вариантом, когда регион не выбран.                                                                                                              |
| `customMapping`                 | `object`    | —            | Необязательный маппинг кодов регионов на пользовательские отображаемые имена, эмодзи или связанные локали. Значением может быть строка (отображаемое имя) или объект со свойствами `name`, `emoji` и/или `locale`. |
| `prioritizeCurrentLocaleRegion` | `boolean`   | `true`       | Если true, регион, соответствующий текущей локали, будет в приоритете в списке.                                                                                                                                    |
| `sortRegionsAlphabetically`     | `boolean`   | `true`       | Если true, регионы сортируются по алфавиту по отображаемому имени.                                                                                                                                                 |
| `asLocaleSelector`              | `boolean`   | `false`      | Если true, при выборе региона локаль также обновляется на локаль, связанную с этим регионом.                                                                                                                       |

Дополнительные пропсы передаются в базовый элемент `<select>`.

## Примеры

### Основное использование

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

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


### С пользовательским маппингом и заполнителем

```jsx title="CustomRegion.jsx" copy
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: "🇬🇧" },
      }}
    />
  );
}
```

***


## Примечания

* Компонент `<RegionSelector>` доступен только на стороне клиента.
* Для полностью настраиваемого интерфейса селектора региона используйте Hook [`useRegionSelector`](/docs/react/api/helpers/use-region-selector).

## Следующие шаги

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