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

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

---

Хук `useRegionSelector` возвращает данные и обработчики, необходимые для создания собственного селектора региона: активный регион, доступные регионы, метаданные региона, а также функции для обновления региона или локали.

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

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

## Обзор [#overview]

Вызовите `useRegionSelector` и подключите полученные значения к своему интерфейсу.

```tsx
'use client';
import { useRegionSelector } from 'gt-react';

export default function CustomRegionSelector() {
  const { region, setRegion, regions, regionData } = useRegionSelector({ // [!code highlight]
    customMapping: { US: { name: 'United States', emoji: '🇺🇸' } }, // [!code highlight]
  });

  return (
    <select value={region} onChange={(e) => setRegion(e.target.value)}>
      {regions.map((r) => (
        <option key={r} value={r}>
          {regionData.get(r)?.emoji} {regionData.get(r)?.name}
        </option>
      ))}
    </select>
  );
}
```

*Примечание: `useRegionSelector` только на стороне клиента и должен использоваться внутри [`<GTProvider>`](/docs/react/reference/components/gt-provider). Если вам не нужен собственный интерфейс, используйте компонент [`<RegionSelector>`](/docs/react/reference/components/region-selector).*

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

Этот хук возвращает активный регион, упорядоченный список регионов, карту `regionData` с метаданными для отображения, а также сеттеры для региона и локали. Если `regions` не указан, доступные регионы определяются на основе поддерживаемых локалей.

## Параметры [#parameters]

`useRegionSelector` принимает необязательный объект конфигурации.

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

### `regions` [#regions]

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

Коды регионов ISO 3166, которые нужно отображать. Если параметр не указан, регионы определяются на основе поддерживаемых локалей.

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

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

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

### `prioritizeCurrentLocaleRegion` [#prioritize]

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

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

### `sortRegionsAlphabetically` [#sort]

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

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

## Возвращаемое значение [#returns]

**Тип** `object`

| Поле           | Описание                                                                                    | Тип                                     |
| -------------- | ------------------------------------------------------------------------------------------- | --------------------------------------- |
| `region`       | Код выбранного региона.                                                                     | `string \| undefined`                   |
| `setRegion`    | Обновляет выбранный регион.                                                                 | `(region: string \| undefined) => void` |
| `regions`      | Доступные коды регионов.                                                                    | `string[]`                              |
| `regionData`   | Сопоставление кодов регионов с данными для отображения (`code`, `name`, `emoji`, `locale`). | `Map<string, RegionData>`               |
| `locale`       | Текущая локаль.                                                                             | `string`                                |
| `setLocale`    | Обновляет локаль.                                                                           | `(locale: string) => void`              |
| `localeRegion` | Код региона по ISO 3166 для текущей локали.                                                 | `string`                                |

## Примечания [#notes]

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