# gt-react: General Translation React SDK: Cambiare lingua
URL: https://generaltranslation.com/it/docs/react/guides/languages.mdx
---
title: Cambiare lingua
description: Come configurare e passare da una lingua all'altra nella tua app React
---

{/* GENERATO AUTOMATICAMENTE: Non modificare direttamente. Modifica il template in content/docs-templates/. */}

Il cambio di lingua consente agli utenti di modificare l'impostazione regionale preferita per i contenuti della tua applicazione. GT React offre diversi approcci, dal semplice cambio programmatico a componenti UI predefiniti per creare selettori di lingua personalizzati.


## Metodi disponibili

* **Via codice**: hook [`useSetLocale`](/docs/react/api/helpers/use-set-locale) per controlli personalizzati
* **UI predefinita**: componente [`<LocaleSelector>`](/docs/react/api/components/locale-selector) con menu a discesa
* **UI personalizzata**: hook [`useLocaleSelector`](/docs/react/api/helpers/use-locale-selector) per creare selettori personalizzati

## Utilizzo dell&#39;hook `useSetLocale`

L&#39;hook [`useSetLocale`](/docs/react/api/helpers/use-set-locale) ti consente di cambiare la lingua dell&#39;app:

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

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

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

Ti basta passare come argomento della funzione restituita dall&#39;hook l&#39;impostazione regionale a cui vuoi passare.


## Utilizzo del componente `<LocaleSelector>`

Il componente [`<LocaleSelector>`](/docs/react/api/components/locale-selector) fornisce un menu a discesa pronto all&#39;uso che mostra automaticamente tutte le impostazioni regionali configurate:

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

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

Questo componente:

* Mostra tutte le impostazioni regionali configurate per il tuo progetto
* Visualizza le impostazioni regionali con i rispettivi nomi nelle lingue native
* Gestisce la logica di cambio dell&#39;impostazione regionale
* Mantiene lo stato della selezione corrente


## Utilizzare l&#39;hook `useLocaleSelector`

Se vuoi creare un componente personalizzato per selezionare l&#39;impostazione regionale, usa [`useLocaleSelector`](/docs/react/api/helpers/use-locale-selector):

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

function CustomLocaleSelector() {
  const { 
    locale,              // Impostazione regionale attiva corrente (es., 'en', 'es')
    locales,             // Array delle impostazioni regionali supportate dal progetto ['en', 'es', 'fr']
    setLocale,           // Funzione per cambiare l'impostazione regionale: setLocale('es')
    getLocaleProperties  // Funzione per ottenere le informazioni di visualizzazione per un'impostazione regionale
  } = 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} {/* e.g., "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}
```


## Note importanti

### Requisito di GTProvider

I componenti per il cambio di lingua devono essere utilizzati all&#39;interno di [`<GTProvider>`](/docs/react/api/components/gtprovider):

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

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


## Passaggi successivi

* [Guida ai contenuti dinamici](/docs/key-concepts/dynamic-content) - Traduzione dei contenuti in runtime
* Riferimenti 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)