# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<LocaleSelector>`
URL: https://generaltranslation.com/es/docs/react/reference/components/locale-selector.mdx
Docs index: https://generaltranslation.com/llms.txt
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)        | Etiquetas de opción personalizadas para los locales.    | `Record<string, string \| Partial<LocaleProperties>>` | Sí       | —                     |
| [`customNames`](#custom-names)            | Asignación obsoleta de códigos a etiquetas.             | `Record<string, string>`                              | Sí       | —                     |
| [Atributo de `<select>`](#select-attributes) | Atributos estándar reenviados al `<select>` subyacente. | `React.SelectHTMLAttributes<HTMLSelectElement>`       | 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** `Record<string, string | Partial<LocaleProperties>>` · **Opcional**

Una asignación de códigos de configuración regional a etiquetas de opciones personalizadas. Los valores de tipo cadena se usan directamente; los valores de tipo objeto usan la propiedad `name` de [`LocaleProperties`](/docs/platform/core/reference/types/locale-properties). Las demás propiedades de configuración regional no modifican la etiqueta renderizada.

### `customNames` [#custom-names]

**Tipo** `Record<string, string>` · **Opcional** · **Obsoleto**

Una asignación antigua de código a etiqueta que se conserva por compatibilidad. Usa `customMapping` en su lugar. Cuando se proporcionan ambas props, `customMapping` tiene prioridad.

### Atributos de `<select>` [#select-attributes]

Los atributos estándar de `<select>`, como `className`, `disabled` y `aria-describedby`, se pasan al elemento renderizado. El componente controla `value` y `onChange`, de modo que, al seleccionar una opción, se actualiza la configuración regional activa.

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

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.