BlogDashboard

Cambio de idioma

Cómo configurar y cambiar de idioma en tu app de React

El cambio de idioma permite a los usuarios establecer su locale preferido para el contenido de tu aplicación. GT React ofrece varios enfoques, desde un cambio programático simple hasta componentes de interfaz prediseñados para selectores de idioma personalizados.

Métodos disponibles

Uso del hook useSetLocale

El hook useSetLocale te permite cambiar el idioma de tu app:

import { useSetLocale } from 'gt-react';

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

  return <button onClick={() => setLocale('en')}>Configurar locale</button>;
}

Simplemente indica el locale al que quieres cambiar como argumento de la función que devuelve el hook.

Uso del componente <LocaleSelector>

El componente <LocaleSelector> proporciona un menú desplegable listo para usar que muestra automáticamente todas las locales configuradas:

import { SelectorDeIdioma } from 'gt-react';

export default function MiComponente() {
  return <SelectorDeIdioma />;
}

Este componente, de forma automática:

  • Muestra todas las locales configuradas para tu proyecto
  • Muestra las locales con sus name nativos
  • Gestiona la lógica de cambio
  • Mantiene el estado de la selección actual

Uso del hook useLocaleSelector

Si quieres crear tu propio componente personalizado de selector de idioma, usa useLocaleSelector:

import { useLocaleSelector } from 'gt-react';

function CustomLocaleSelector() {
  const { 
    locale,              // Locale activo actual (p. ej., 'en', 'es')
    locales,             // Lista de locales que admite tu proyecto ['en', 'es', 'fr']
    setLocale,           // Función para cambiar el locale: setLocale('es')
    getLocaleProperties  // Función para obtener la información de visualización de un locale
  } = 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 de cambio de idioma deben usarse dentro de un <GTProvider>:

// ✅ Correcto
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

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

Próximos pasos

¿Qué te parece esta guía?

Diccionarios

Cómo usar patrones tradicionales de traducción basados en diccionarios

Almacenamiento local de traducciones

Almacena las traducciones en el paquete de tu aplicación en lugar de usar una red de distribución de contenido (CDN)

En esta página

Métodos disponibles
Uso del hook useSetLocale
Uso del componente <LocaleSelector>
Uso del hook useLocaleSelector
Notas importantes
Requisito de GTProvider
Próximos pasos