GitHub

El cambio de idioma permite a los usuarios ajustar su locale preferido para el contenido de tu aplicación. GT React ofrece varias opciones, desde un cambio programático sencillo hasta componentes de interfaz preconstruidos para crear selectores de idioma personalizados.

Métodos disponibles

Programático: hook useSetLocale para controles personalizados
UI prediseñada: componente <LocaleSelector> con menú desplegable
UI personalizada: hook useLocaleSelector para crear selectores personalizados

Uso del hook `useSetLocale`

El hook useSetLocale te permite cambiar el idioma de tu aplicación:

import { useSetLocale } from 'gt-react';

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

  return <button onClick={() => setLocale('en')}>Establecer idioma</button>;
}

Simplemente proporciona el locale al que quieres cambiar como argumento de la función que retorna 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 { LocaleSelector } from 'gt-react';

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

Este componente, automáticamente:

Muestra todas las locales configuradas para tu proyecto
Muestra las locales con sus nombres en su idioma nativo
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 locale, utiliza useLocaleSelector:

import { useLocaleSelector } from 'gt-react';

function CustomLocaleSelector() {
  const { 
    locale,              // Locale activo actual (p. ej., 'en', 'es')
    locales,             // Array de locales que soporta tu proyecto ['en', 'es', 'fr']
    setLocale,           // Función para cambiar el locale: setLocale('es')
    getLocaleProperties  // Función para obtener 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>
  );
}

Avisos importantes

Requisito de GTProvider

Los componentes para cambiar el idioma deben usarse dentro de un <GTProvider>:

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

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

Próximos pasos

Guía de contenido dinámico - Traducción de contenido en tiempo de ejecución
Referencia de API:
- Hook useSetLocale
- Componente <LocaleSelector>
- Hook useLocaleSelector

Métodos disponibles

Programático: hook useSetLocale para controles personalizados
UI prediseñada: componente <LocaleSelector> con menú desplegable
UI personalizada: hook useLocaleSelector para crear selectores personalizados

Uso del hook `useSetLocale`

El hook useSetLocale te permite cambiar el idioma de tu aplicación:

import { useSetLocale } from 'gt-react';

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

  return <button onClick={() => setLocale('en')}>Establecer idioma</button>;
}

Simplemente proporciona el locale al que quieres cambiar como argumento de la función que retorna 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 { LocaleSelector } from 'gt-react';

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

Este componente, automáticamente:

Muestra todas las locales configuradas para tu proyecto
Muestra las locales con sus nombres en su idioma nativo
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 locale, utiliza useLocaleSelector:

import { useLocaleSelector } from 'gt-react';

function CustomLocaleSelector() {
  const { 
    locale,              // Locale activo actual (p. ej., 'en', 'es')
    locales,             // Array de locales que soporta tu proyecto ['en', 'es', 'fr']
    setLocale,           // Función para cambiar el locale: setLocale('es')
    getLocaleProperties  // Función para obtener 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>
  );
}

Avisos importantes

Requisito de GTProvider

Los componentes para cambiar el idioma deben usarse dentro de un <GTProvider>:

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

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

Próximos pasos

Guía de contenido dinámico - Traducción de contenido en tiempo de ejecución
Referencia de API:
- Hook useSetLocale
- Componente <LocaleSelector>
- Hook useLocaleSelector

Métodos disponibles

Programático: hook useSetLocale para controles personalizados
UI prediseñada: componente <LocaleSelector> con menú desplegable
UI personalizada: hook useLocaleSelector para crear selectores personalizados

Uso del hook `useSetLocale`

El hook useSetLocale te permite cambiar el idioma de tu aplicación:

import { useSetLocale } from 'gt-react';

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

  return <button onClick={() => setLocale('en')}>Establecer idioma</button>;
}

Simplemente proporciona el locale al que quieres cambiar como argumento de la función que retorna 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 { LocaleSelector } from 'gt-react';

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

Este componente, automáticamente:

Muestra todas las locales configuradas para tu proyecto
Muestra las locales con sus nombres en su idioma nativo
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 locale, utiliza useLocaleSelector:

import { useLocaleSelector } from 'gt-react';

function CustomLocaleSelector() {
  const { 
    locale,              // Locale activo actual (p. ej., 'en', 'es')
    locales,             // Array de locales que soporta tu proyecto ['en', 'es', 'fr']
    setLocale,           // Función para cambiar el locale: setLocale('es')
    getLocaleProperties  // Función para obtener 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>
  );
}

Avisos importantes

Requisito de GTProvider

Los componentes para cambiar el idioma deben usarse dentro de un <GTProvider>:

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

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

Próximos pasos

Guía de contenido dinámico - Traducción de contenido en tiempo de ejecución
Referencia de API:
- Hook useSetLocale
- Componente <LocaleSelector>
- Hook useLocaleSelector

Cambio de idioma

Métodos disponibles

Uso del hook `useSetLocale`

Uso del componente `<LocaleSelector>`

Uso del hook `useLocaleSelector`

Avisos importantes

Requisito de GTProvider

Próximos pasos

En esta página

Cambio de idioma

Métodos disponibles

Uso del hook `useSetLocale`

Uso del componente `<LocaleSelector>`

Uso del hook `useLocaleSelector`

Avisos importantes

Requisito de GTProvider

Próximos pasos

En esta página

Cambio de idioma

Métodos disponibles

Uso del hook `useSetLocale`

Uso del componente `<LocaleSelector>`

Uso del hook `useLocaleSelector`

Avisos importantes

Requisito de GTProvider

Próximos pasos

En esta página

Dale una estrella en GitHub

Dale una estrella en GitHub

Cambio de idioma

En esta página

Cambio de idioma

En esta página

Cambio de idioma

En esta página

GitHubDale una estrella en GitHub

GitHubDale una estrella en GitHub

Dale una estrella en GitHub

Dale una estrella en GitHub