# gt-next: General Translation Next.js SDK: useRegionSelector
URL: https://generaltranslation.com/ru/docs/next/api/helpers/use-region-selector.mdx
---
title: useRegionSelector
description: Справка по API хука useRegionSelector
---

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


## Обзор

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

<Callout>
  `useRegionSelector` — это клиентский хук, и *его можно использовать только в клиентских компонентах*.
  Убедитесь, что ваше приложение обернуто в [`<GTProvider>`](/docs/next/api/components/gtprovider).
</Callout>

## Справочник

### Параметры

Необязательный объект конфигурации:

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

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

Объект, содержащий:

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

***

## Примеры

### Создайте собственный селектор региона

```jsx title="CustomRegionSelector.jsx" copy
'use client';
import { useRegionSelector } from 'gt-next';

export default function CustomRegionSelector() {
  const { region, setRegion, regions, regionData } = useRegionSelector({ // [!code highlight]
    customMapping: { US: { name: "United States", emoji: "🇺🇸" } }, // [!code highlight]
  }); // [!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>
  );
}
```

***


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

* Если `regions` не указан, доступные регионы определяются на основе поддерживаемых локалей, заданных в вашем [`gt.config.json`](/docs/next/api/config/gt-config-json).
* Чтобы использовать готовый селектор регионов, воспользуйтесь компонентом [`<RegionSelector>`](/docs/next/api/components/region-selector).

## Дальнейшие шаги

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