# General Translation React SDKs (gt-react, gt-next, gt-react-native): <RegionSelector>
URL: https://generaltranslation.com/es/docs/react/reference/components/region-selector.mdx
---

title: "<RegionSelector>"
description: Muestra un dropdown para cambiar la región activa. Referencia de la API del componente <RegionSelector>.

---

El componente `<RegionSelector>` ofrece a los usuarios un dropdown preconstruido para seleccionar su región, sin que tengas que crear un selector personalizado. Es un componente del lado del cliente que lee los datos de la región del contexto de [`<GTProvider>`](/docs/react/reference/components/gt-provider).

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

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

## Descripción general [#overview]

Renderiza `<RegionSelector>` dentro de tu proveedor. Si no le pasas props, infiere las regiones a partir de las configuraciones regionales compatibles.

```tsx
import { RegionSelector } from 'gt-react';

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

*Nota: `<RegionSelector>` solo está disponible del lado del cliente y renderiza un elemento `<select>` (o `null` cuando no hay regiones disponibles). Para un selector completamente personalizado, usa el hook [`useRegionSelector`](/docs/react/reference/hooks/use-region-selector).*

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

* **Lee el contexto.** De forma predeterminada, las regiones se infieren a partir de las configuraciones regionales compatibles en el contexto de [`<GTProvider>`](/docs/react/reference/components/gt-provider). Proporciona `regions` para mostrar un conjunto concreto.
* **Cambia la región.** Al seleccionar una opción, se establece la región activa. Con `asLocaleSelector`, también se actualiza la configuración regional a la configuración regional asociada a la región.
* **Props que se transfieren.** Cualquier prop adicional se pasa al elemento `<select>` subyacente.

## Props [#props]

| Prop                                           | Description                                                                  | Type        | Optional | Default  |
| ---------------------------------------------- | ---------------------------------------------------------------------------- | ----------- | -------- | -------- |
| [`regions`](#regions)                          | Subconjunto de códigos de región ISO 3166 que se mostrarán.                  | `string[]`  | Sí       | Inferido |
| [`placeholder`](#placeholder)                  | Contenido del placeholder de la primera opción.                              | `ReactNode` | Sí       | —        |
| [`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`   |
| [`asLocaleSelector`](#as-locale-selector)      | También actualiza la configuración regional cuando se selecciona una región. | `boolean`   | Sí       | `false`  |

### `regions` [#regions]

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

Una lista de códigos de región ISO 3166 para mostrar, como `['US', 'CA', 'GB']`. Si se omite, las regiones se infieren a partir de las configuraciones regionales admitidas.

### `placeholder` [#placeholder]

**Tipo** `ReactNode` · **Opcional**

Contenido del placeholder que se muestra como primera opción cuando no se ha seleccionado ninguna región.

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

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

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

### `prioritizeCurrentLocaleRegion` [#prioritize]

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

Cuando es `true`, la región correspondiente a la configuración regional actual se prioriza al inicio de la lista.

### `sortRegionsAlphabetically` [#sort]

**Tipo** `boolean` · **Opcional** · **Por defecto** `true`

Si es `true`, las regiones se ordenan alfabéticamente según el nombre para mostrar.

### `asLocaleSelector` [#as-locale-selector]

**Tipo** `boolean` · **Opcional** · **Predeterminado** `false`

Cuando es `true`, al seleccionar una región, también se actualiza la configuración regional a la asociada con esa región.

## Ejemplos [#examples]

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

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

```tsx title="CustomRegion.tsx"
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 [#notes]

* `<RegionSelector>` está disponible solo del lado del cliente.
* Para leer la región activa, usa [`useRegion`](/docs/react/reference/hooks/use-region); para crear un selector personalizado, usa [`useRegionSelector`](/docs/react/reference/hooks/use-region-selector).
* Para el selector equivalente de configuración regional, consulta [`<LocaleSelector>`](/docs/react/reference/components/locale-selector).