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

---

El componente `<LocaleSelector>` es un menú desplegable prediseñado del lado del cliente con las configuraciones regionales configuradas de tu aplicación, para que puedas añadir un selector de idioma funcional sin tener que crear el tuyo propio.

*Disponible en `gt-react`, `gt-next` y `gt-tanstack-start`.*

*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 las configuraciones regionales configuradas.

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

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

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

*Nota: `<LocaleSelector>` está disponible del lado del 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 las configuraciones regionales compatibles del contexto de [`<GTProvider>`](/docs/react/reference/components/gt-provider). Proporciona `locales` para mostrar solo un subconjunto.
* **Cambia la configuración regional.** Al seleccionar una opción, se guarda la configuración regional activa y se aplica el comportamiento de actualización, recarga o navegación del framework. Consulta [Gestión de configuraciones regionales](/docs/react/guides/managing-locales#persistence).
* **No renderiza nada cuando está vacío.** El componente devuelve `null` cuando no hay configuraciones regionales 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 configuración regional para rellenar el menú desplegable, como `['en', 'es-MX', 'fr']`. Si se omite, se usan los locales del contexto de [`<GTProvider>`](/docs/react/reference/components/gt-provider).

### `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).