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

title: useRegionSelector
description: Crea un selector de región personalizado con General Translation gt-react. Referencia de API de useRegionSelector.

---

El `hook` `useRegionSelector` devuelve los datos y las funciones necesarios para crear un selector de región personalizado: la región activa, las regiones disponibles, los metadatos de la región y las funciones para actualizar la región o la configuración regional.

*Disponible en `gt-react` y `gt-react-native`. Los ejemplos importan desde `gt-react`; en su lugar, importa desde el paquete de tu framework.*

*Nota: no se exporta en `gt-next` ni en `gt-tanstack-start`.*

## Descripción general [#overview]

Llama a `useRegionSelector` e integra sus valores en tu propia interfaz de usuario.

```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>
  );
}
```

*Nota: `useRegionSelector` solo está disponible del lado del cliente y debe usarse dentro de un [`<GTProvider>`](/docs/react/reference/components/gt-provider). Si no necesitas una interfaz de usuario personalizada, usa en su lugar el componente [`<RegionSelector>`](/docs/react/reference/components/region-selector).*

## Cómo funciona [#how-it-works]

El hook devuelve la región activa, la lista ordenada de regiones, un mapa `regionData` con metadatos de visualización y funciones para establecer la región y la configuración regional. Cuando no se proporciona `regions`, las regiones disponibles se infieren a partir de las configuraciones regionales compatibles.

## Parámetros [#parameters]

`useRegionSelector` acepta un objeto de configuración opcional.

| Parámetro                                      | Descripción                                                                                | Tipo       | Opcional | Predeterminado |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------ | ---------- | -------- | -------------- |
| [`regions`](#regions)                          | Subconjunto de códigos de región ISO 3166 que se mostrarán.                                | `string[]` | Sí       | Inferido       |
| [`customMapping`](#custom-mapping)             | Nombres para mostrar, emojis o configuraciones regionales personalizadas para cada región. | `object`   | Sí       | —              |
| [`prioritizeCurrentLocaleRegion`](#prioritize) | Coloca primero la región de la configuración regional actual.                              | `boolean`  | Sí       | `true`         |
| [`sortRegionsAlphabetically`](#sort)           | Ordena las regiones alfabéticamente por nombre para mostrar.                               | `boolean`  | Sí       | `true`         |

### `regions` [#regions]

**Tipo** `string[]` · **Opcional** · **Predeterminado** Inferido

Códigos de región ISO 3166 que se mostrarán. Si se omite, las regiones se infieren a partir de las configuraciones regionales compatibles.

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

**Tipo** `object` · **Opcional**

Una asignación de códigos de región a datos personalizados de presentación. Cada valor puede ser una `string` (nombre para mostrar) o un objeto con las propiedades `name`, `emoji` y/o `locale`.

### `prioritizeCurrentLocaleRegion` [#prioritize]

**Tipo** `boolean` · **Opcional** · **Predeterminado** `true`

Si es `true`, se prioriza en la lista la región que coincide con la configuración regional actual.

### `sortRegionsAlphabetically` [#sort]

**Tipo** `boolean` · **Opcional** · **Predeterminado** `true`

Cuando es `true`, las regiones se ordenan alfabéticamente por su nombre para mostrar.

## Devuelve [#returns]

**Tipo** `object`

| Campo          | Descripción                                                                                       | Tipo                                    |
| -------------- | ------------------------------------------------------------------------------------------------- | --------------------------------------- |
| `region`       | El código de región seleccionado actualmente.                                                     | `string \| undefined`                   |
| `setRegion`    | Actualiza la región seleccionada.                                                                 | `(region: string \| undefined) => void` |
| `regions`      | Códigos de región disponibles.                                                                    | `string[]`                              |
| `regionData`   | Mapa que asocia códigos de región con datos de visualización (`code`, `name`, `emoji`, `locale`). | `Map<string, RegionData>`               |
| `locale`       | La configuración regional actual.                                                                 | `string`                                |
| `setLocale`    | Actualiza la configuración regional.                                                              | `(locale: string) => void`              |
| `localeRegion` | El código de región ISO 3166 de la configuración regional actual.                                 | `string`                                |

## Notas [#notes]

* `useRegionSelector` está disponible solo del lado del cliente.
* Para un menú desplegable listo para usar, utiliza [`<RegionSelector>`](/docs/react/reference/components/region-selector).
* Para su equivalente de configuración regional, consulta [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector).