Dashboard

Cambio lingua

Come configurare e passare da una lingua all’altra nella tua app React

La funzione di cambio lingua consente agli utenti di impostare la lingua/locale preferita per i contenuti dell’applicazione. GT React offre vari approcci: dal semplice switch programmatico a componenti UI predefiniti per creare selettori di lingua personalizzati.

Metodi disponibili

Uso dell'hook useSetLocale

L'hook useSetLocale consente di cambiare la lingua dell’app:

import { useSetLocale } from 'gt-react';

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

  return <button onClick={() => setLocale('en')}>Imposta la lingua</button>;
}

Indica semplicemente la locale a cui vuoi passare come argomento della funzione restituita dall’hook.

Utilizzo del componente <LocaleSelector>

Il componente <LocaleSelector> offre un menu a discesa pronto all’uso che mostra automaticamente tutte le localizzazioni configurate:

import { LocaleSelector } from 'gt-react';

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

Questo componente:

  • Mostra tutte le lingue/locali configurate per il tuo progetto
  • Visualizza le lingue/locali con i loro nomi nella lingua nativa
  • Gestisce la logica di cambio lingua
  • Mantiene lo stato della selezione corrente

Utilizzo dell’hook useLocaleSelector

Se vuoi creare un componente personalizzato per selezionare la lingua/locale, usa useLocaleSelector:

import { useLocaleSelector } from 'gt-react';

function CustomLocaleSelector() {
  const { 
    locale,              // Locale attivo corrente (es. 'en', 'es')
    locales,             // Array dei locale supportati dal tuo progetto ['en', 'es', 'fr']
    setLocale,           // Funzione per modificare il locale: setLocale('es')
    getLocaleProperties  // Funzione per ottenere le informazioni di visualizzazione per 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} {/* es. "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}

Avvertenze importanti

Requisito di GTProvider

I componenti per la modifica della lingua devono essere usati all'interno di <GTProvider>:

// ✅ Corretto
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

// ❌ Errato - fuori dal provider
<LanguageSwitcher />

Prossimi passaggi

Come valuti questa guida?

In questa pagina

Metodi disponibili
Uso dell'hook useSetLocale
Utilizzo del componente <LocaleSelector>
Utilizzo dell’hook useLocaleSelector
Avvertenze importanti
Requisito di GTProvider
Prossimi passaggi
Cambio lingua