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

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


## Descripción general

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

## Referencia

### Devuelve

Un elemento `<select>` que permite al usuario elegir su región, o `null` si no hay ninguna región disponible.

### 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 personalizados, emojis o configuraciones regionales asociadas. 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`, la región correspondiente a la configuración regional actual tiene prioridad en la lista.                                                                                                                                                 |
| `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 configuración regional asociada a esa región.                                                                                                             |

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

## Ejemplos

### Uso básico

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

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-next';

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 una interfaz de usuario totalmente personalizada del selector de región, usa el hook [`useRegionSelector`](/docs/next/api/helpers/use-region-selector).

## Siguientes pasos

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