# General Translation React SDKs (gt-react, gt-next): 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 con General Translation gt-react. Referencia de la API de RegionSelector.

---

El componente `<RegionSelector>` renderiza un dropdown que permite a los usuarios cambiar la región activa. 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>`. 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).