# gt-react: General Translation React SDK: RegionSelector
URL: https://generaltranslation.com/es/docs/react/api/components/region-selector.mdx
---
title: RegionSelector
description: Referencia de la API del componente RegionSelector
---

{/* GENERADO AUTOMÁTICAMENTE: No lo edites directamente. Edita la plantilla en content/docs-templates/. */}


## Descripción general

El componente `<RegionSelector>` es una lista desplegable que permite a los usuarios seleccionar su región.
Es un componente del lado del cliente que lee los datos de región del [contexto de `<GTProvider>`](/docs/react/api/components/gtprovider).

## Referencia

### Devuelve

Un elemento `<select>` que permite al usuario seleccionar su región, o `null` si no hay regiones disponibles.

### Props

| Prop                            | Tipo        | Predeterminado | Descripción                                                                                                                                                                                                                                             |
| ------------------------------- | ----------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `regions`                       | `string[]`  | —              | Un array opcional de códigos de región ISO 3166 (p. ej., `['US', 'CA', 'GB']`) para mostrar. Si no se proporciona, las regiones se infieren a partir de las configuraciones regionales compatibles.                                                     |
| `placeholder`                   | `ReactNode` | —              | Contenido opcional de marcador de posición que se muestra como primera opción cuando no hay ninguna región seleccionada.                                                                                                                                |
| `customMapping`                 | `object`    | —              | Mapeo opcional de códigos de región a nombres de visualización, emojis o configuraciones regionales asociadas personalizadas. Los valores pueden ser una cadena (nombre de visualización) o un objeto con las propiedades `name`, `emoji` y/o `locale`. |
| `prioritizeCurrentLocaleRegion` | `boolean`   | `true`         | Si es `true`, se prioriza en la lista la región correspondiente a la configuración regional actual.                                                                                                                                                     |
| `sortRegionsAlphabetically`     | `boolean`   | `true`         | Si es `true`, las regiones se ordenan alfabéticamente por nombre de visualización.                                                                                                                                                                      |
| `asLocaleSelector`              | `boolean`   | `false`        | Si es `true`, al seleccionar una región también se actualizará la configuración regional a la asociada a esa región.                                                                                                                                    |

Los props adicionales se pasan al elemento `<select>` interno.

## Ejemplos

### Uso básico

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

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


### Con asignación personalizada de región y marcador de posición

```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: "🇬🇧" },
      }}
    />
  );
}
```

***


## Notas

* El componente `<RegionSelector>` solo funciona del lado del cliente.
* Para crear un selector de región completamente personalizado en la interfaz de usuario, usa el Hook [`useRegionSelector`](/docs/react/api/helpers/use-region-selector).

## Siguientes pasos

* Consulta [`useRegionSelector`](/docs/react/api/helpers/use-region-selector) para crear un selector de región personalizado.
* Consulta [`useRegion`](/docs/react/api/helpers/use-region) para consultar la región actual.
* Consulta [`<LocaleSelector>`](/docs/react/api/components/locale-selector) para ver el equivalente para la configuración regional.