# gt-react: General Translation React SDK: Cambio de idioma
URL: https://generaltranslation.com/es/docs/react/guides/languages.mdx
---
title: Cambio de idioma
description: Cómo configurar y alternar entre idiomas en tu aplicación React
---

{/* GENERADO AUTOMÁTICAMENTE: No edites esto directamente. En su lugar, edita la plantilla en content/docs-templates/. */}

El cambio de idioma permite a los usuarios cambiar la configuración regional preferida del contenido de tu aplicación. GT React ofrece varios enfoques, desde un cambio programático sencillo hasta componentes de interfaz de usuario predefinidos para selectores de idioma personalizados.


## Métodos disponibles

* **Programático**: hook [`useSetLocale`](/docs/react/api/helpers/use-set-locale) para controles personalizados
* **Interfaz de usuario predefinida**: componente [`<LocaleSelector>`](/docs/react/api/components/locale-selector) con menú desplegable
* **Interfaz de usuario personalizada**: hook [`useLocaleSelector`](/docs/react/api/helpers/use-locale-selector) para crear selectores personalizados

## Uso del hook `useSetLocale`

El hook [`useSetLocale`](/docs/react/api/helpers/use-set-locale) te permite cambiar el idioma de tu aplicación:

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

export default function MyComponent() {
  const setLocale = useSetLocale();

  return <button onClick={() => setLocale('en')}>Set Locale</button>;
}
```

Solo pasa la configuración regional a la que quieres cambiar como argumento de la función que devuelve el hook.


## Uso del componente `<LocaleSelector>`

El componente [`<LocaleSelector>`](/docs/react/api/components/locale-selector) proporciona un menú desplegable listo para usar que muestra automáticamente todas las configuraciones regionales configuradas:

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

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

Este componente automáticamente:

* Muestra todas las configuraciones regionales configuradas para tu proyecto
* Muestra las configuraciones regionales con sus nombres nativos
* Maneja la lógica de cambio
* Mantiene el estado de la selección actual


## Uso del hook `useLocaleSelector`

Si quieres crear tu propio componente personalizado para seleccionar la configuración regional, usa [`useLocaleSelector`](/docs/react/api/helpers/use-locale-selector):

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

function CustomLocaleSelector() {
  const { 
    locale,              // Configuración regional activa actual (p. ej., 'en', 'es')
    locales,             // Array de configuraciones regionales que admite tu proyecto ['en', 'es', 'fr']
    setLocale,           // Función para cambiar la configuración regional: setLocale('es')
    getLocaleProperties  // Función para obtener información de visualización de una configuración regional
  } = useLocaleSelector();
  
  if (!locales?.length) return null;
  
  return (
    <select 
      value={locale || ''} 
      onChange={(e) => setLocale(e.target.value)}
    >
      {locales.map((loc) => {
        const props = getLocaleProperties(loc);
        return (
          <option key={loc} value={loc}>
            {props.nativeNameWithRegionCode} {/* p. ej., "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}
```

## Notas importantes

### Requisito de GTProvider

Los componentes para cambiar de idioma deben usarse dentro de un [`<GTProvider>`](/docs/react/api/components/gtprovider):

```tsx
// ✅ Correcto
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

// ❌ Incorrecto - fuera del proveedor
<LanguageSwitcher />
```


## Siguientes pasos

* [Guía de contenido dinámico](/docs/key-concepts/dynamic-content) - traducción de contenido en tiempo de ejecución
* Referencias de la API:
  * [Hook `useSetLocale`](/docs/react/api/helpers/use-set-locale)
  * [Componente `<LocaleSelector>`](/docs/react/api/components/locale-selector)
  * [Hook `useLocaleSelector`](/docs/react/api/helpers/use-locale-selector)