# 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`. 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>`](/docs/react/reference/components/gt-provider). 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 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).