# General Translation React SDKs (gt-react, gt-next): LocaleSelector
URL: https://generaltranslation.com/es/docs/react/reference/components/locale-selector.mdx
---

title: LocaleSelector
description: Muestra un menú desplegable para cambiar la configuración regional activa con General Translation gt-react. Referencia de la API de LocaleSelector.

---

El componente `<LocaleSelector>` muestra un menú desplegable que permite cambiar la configuración regional activa. Es un componente del lado del cliente.

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

*Nota: `gt-react-native` no lo exporta. Para crear un selector personalizado, usa [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector).*

## Resumen [#overview]

Renderiza `<LocaleSelector>` en cualquier componente cliente. Sin props, muestra los locales configurados.

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

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

*Nota: `<LocaleSelector>` solo se puede usar en el cliente. Para un selector totalmente personalizado, usa el hook [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector).*

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

* **Lee el contexto.** De forma predeterminada, las opciones se obtienen de los locales compatibles del contexto de `<GTProvider>`. Proporciona `locales` para mostrar solo un subconjunto.
* **Cambia la configuración regional.** Al seleccionar una opción, se establece la configuración regional activa, lo que guarda la selección y recarga la página.
* **No renderiza nada cuando está vacío.** El componente devuelve `null` cuando no hay locales disponibles.

## Props [#props]

| Prop                               | Descripción                                                         | Tipo       | Opcional | Predeterminado        |
| ---------------------------------- | ------------------------------------------------------------------- | ---------- | -------- | --------------------- |
| [`locales`](#locales)              | Subconjunto de locales que se mostrarán.                            | `string[]` | Sí       | Todos los compatibles |
| [`customMapping`](#custom-mapping) | Nombres para mostrar o propiedades personalizadas para los locales. | `object`   | Sí       | —                     |

### `locales` [#locales]

**Tipo** `string[]` · **Opcional** · **Predeterminado** Todas las admitidas

Un subconjunto de códigos de locale para rellenar el menú desplegable, como `['en', 'es-MX', 'fr']`. Si se omite, se usan los locales del contexto de `<GTProvider>`.

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

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

Una asignación de códigos de configuración regional a nombres para mostrar personalizados, emojis u otras propiedades. *Nota: la prop `customNames` anterior (un mapa simple de código a nombre) ha quedado obsoleta en favor de `customMapping`.*

## Ejemplos [#examples]

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

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

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

export default function MyComponent() {
  const customMapping = {
    en: 'English',
    es: 'Español',
    'fr-CA': 'Français (Canada)',
  };
  return <LocaleSelector customMapping={customMapping} />;
}
```

## Notas [#notes]

* `<LocaleSelector>` solo funciona del lado del cliente.
* Para consultar la configuración regional activa, usa [`useLocale`](/docs/react/reference/hooks/use-locale); para crear un selector personalizado, usa [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector).