# gt-react: General Translation React SDK: useRegionSelector
URL: https://generaltranslation.com/es/docs/react/api/helpers/use-region-selector.mdx
---
title: useRegionSelector
description: Referencia de la API para el hook useRegionSelector
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita la plantilla en content/docs-templates/. */}


## Resumen

El hook `useRegionSelector` proporciona los datos y manejadores necesarios para implementar un componente personalizado de interfaz de usuario de selector de región. Devuelve la región actual, una lista de regiones disponibles, metadatos de la región y funciones para actualizar la región o la configuración regional.

<Callout>
  `useRegionSelector` es un hook del lado del cliente y *solo puede usarse en componentes del lado del cliente*.
  Asegúrate de que tu aplicación esté envuelta en un [`<GTProvider>`](/docs/react/api/components/gtprovider).
</Callout>

## Referencia

### Parámetros

Un objeto de configuración opcional:

| Parámetro                       | Tipo       | Predeterminado | Descripción                                                                                                                                                                                                                                                   |
| ------------------------------- | ---------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `regions`                       | `string[]` | —              | Un array opcional de códigos de región ISO 3166 para mostrar. Si no se proporciona, las regiones se infieren a partir de las configuraciones regionales compatibles.                                                                                          |
| `customMapping`                 | `object`   | —              | Mapeo opcional para sobrescribir los nombres de visualización, los emojis o las configuraciones regionales asociadas de las regiones. Los valores pueden ser una cadena (nombre de visualización) o un objeto con las propiedades `name`, `emoji` o `locale`. |
| `prioritizeCurrentLocaleRegion` | `boolean`  | `true`         | Si es `true`, la región correspondiente a la configuración regional actual se prioriza en la lista.                                                                                                                                                           |
| `sortRegionsAlphabetically`     | `boolean`  | `true`         | Si es `true`, las regiones se ordenan alfabéticamente por nombre de visualización.                                                                                                                                                                            |

### Devuelve

Un objeto que contiene:

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

***

## Ejemplos

### Crea un selector de región personalizado

```jsx title="CustomRegionSelector.jsx" copy
'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]
  }); // [!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>
  );
}
```

***


## Notas

* Si no se proporciona `regions`, las regiones disponibles se infieren a partir de las configuraciones regionales compatibles definidas en [`gt.config.json`](/docs/react/api/config/gt-config-json).
* Para usar un selector de región predefinido, utiliza el componente [`<RegionSelector>`](/docs/react/api/components/region-selector).

## Siguientes pasos

* Consulta [`<RegionSelector>`](/docs/react/api/components/region-selector) para usar un componente de menú desplegable listo para usar.
* Consulta [`useRegion`](/docs/react/api/helpers/use-region) para leer la región actual.
* Consulta [`useLocaleSelector`](/docs/react/api/helpers/use-locale-selector) para la opción equivalente de configuración regional.