# General Translation React SDKs (gt-react, gt-next, gt-react-native): Gestire le impostazioni regionali
URL: https://generaltranslation.com/it/docs/react/guides/managing-locales.mdx
---
title: Gestire le impostazioni regionali
description: Come configurare le impostazioni regionali supportate, creare un selettore della lingua React e leggere o modificare l'impostazione regionale attiva.
related:
  links:
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/configuring
    - /docs/react/guides/storing-translations

---

I codici locali come `en-US` e `fr` collegano la scelta della lingua dell'utente alle traduzioni e alle regole di formattazione corrette.

Dichiara le impostazioni regionali supportate dalla tua app, consenti agli utenti di sceglierne una e leggi l'impostazione regionale attiva quando la tua UI richiede un comportamento specifico per lingua.

## Comprendere lo stato dell'impostazione regionale [#locale-state]

* **Impostazione regionale predefinita:** la lingua in cui è scritto il contenuto sorgente e l'ultima alternativa quando nessuna impostazione regionale supportata corrisponde.
* **Impostazioni regionali supportate:** tutte le impostazioni regionali tra cui un utente può scegliere, inclusa quella predefinita e quelle di destinazione.
* **Impostazione regionale attiva:** l'impostazione regionale supportata selezionata dall'URL, da una preferenza salvata, dalle impostazioni del browser o da quella predefinita.

## Dichiara le impostazioni regionali supportate [#declare]

Imposta [`defaultLocale`](/docs/react/reference/config#default-locale) ed elenca le [`locales`](/docs/react/reference/config#locales) di destinazione in `gt.config.json`:

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr", "de"]
}
```

In React, TanStack Start e React Native, passa questi valori alla chiamata di inizializzazione. In Next.js, [`withGTConfig`](/docs/react/nextjs/config) legge automaticamente `gt.config.json`. Vedi [Configurare General Translation](/docs/react/guides/configuring) per la configurazione di ciascun framework.

## Aggiungi un selettore di lingua [#switcher]

Scegli l'approccio più semplice adatto alla tua interfaccia:

* Usa [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) per un menu a discesa pronto all&#39;uso in React, Next.js o TanStack Start.
* Usa [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) per creare un selettore di lingua personalizzato in qualsiasi framework supportato.
* Usa [`useSetLocale`](/docs/react/reference/hooks/use-set-locale) per un pulsante o un altro controllo che passa a un&#39;impostazione regionale nota.

### Usa il selettore già pronto

Renderizza [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) in un componente client. Senza props, elenca tutte le impostazioni regionali configurate e cambia l&#39;impostazione regionale attiva quando l&#39;utente ne seleziona una.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { LocaleSelector } from 'gt-react';

    <LocaleSelector />;
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    import { LocaleSelector } from 'gt-next';

    <LocaleSelector />;
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { LocaleSelector } from 'gt-tanstack-start';

    <LocaleSelector />;
    ```
  </Tab>

  <Tab value="React Native">
    *Nota: React Native non esporta [`<LocaleSelector>`](/docs/react/reference/components/locale-selector). Crea un selettore personalizzato con [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector), come mostrato di seguito.*
  </Tab>
</Tabs>

### Crea un selettore di lingua personalizzato

[`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) fornisce, in un unico hook, l&#39;impostazione regionale attiva, le impostazioni regionali disponibili, un setter e i nomi visualizzati localizzati. Usa i controlli del tuo framework:

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { useLocaleSelector } from 'gt-react';

    function Switcher() {
      const { locale, locales, setLocale, getLocaleProperties } =
        useLocaleSelector();

      return (
        <select value={locale} onChange={(e) => setLocale(e.target.value)}>
          {locales.map((localeCode) => (
            <option key={localeCode} value={localeCode}>
              {getLocaleProperties(localeCode).nativeNameWithRegionCode}
            </option>
          ))}
        </select>
      );
    }
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx
    'use client';

    import { useLocaleSelector } from 'gt-next';

    function Switcher() {
      const { locale, locales, setLocale, getLocaleProperties } =
        useLocaleSelector();

      return (
        <select value={locale} onChange={(e) => setLocale(e.target.value)}>
          {locales.map((localeCode) => (
            <option key={localeCode} value={localeCode}>
              {getLocaleProperties(localeCode).nativeNameWithRegionCode}
            </option>
          ))}
        </select>
      );
    }
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { useLocaleSelector } from 'gt-tanstack-start';

    function Switcher() {
      const { locale, locales, setLocale, getLocaleProperties } =
        useLocaleSelector();

      return (
        <select value={locale} onChange={(e) => setLocale(e.target.value)}>
          {locales.map((localeCode) => (
            <option key={localeCode} value={localeCode}>
              {getLocaleProperties(localeCode).nativeNameWithRegionCode}
            </option>
          ))}
        </select>
      );
    }
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { Button, View } from 'react-native';
    import { useLocaleSelector } from 'gt-react-native';

    function Switcher() {
      const { locale, locales, setLocale, getLocaleProperties } =
        useLocaleSelector();

      return (
        <View>
          {locales.map((localeCode) => (
            <Button
              key={localeCode}
              title={getLocaleProperties(localeCode).nativeNameWithRegionCode}
              disabled={localeCode === locale}
              onPress={() => setLocale(localeCode)}
            />
          ))}
        </View>
      );
    }
    ```
  </Tab>
</Tabs>

Se ti serve solo un&#39;azione diretta in un&#39;app web React, chiama [`useSetLocale`](/docs/react/reference/hooks/use-set-locale):

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

function FrenchButton() {
  const setLocale = useSetLocale();
  return <button onClick={() => setLocale('fr')}>Français</button>;
}
```

## Salva e instrada le scelte relative all&#39;impostazione regionale [#persistence]

La modifica dell&#39;impostazione regionale tramite [`<LocaleSelector>`](/docs/react/reference/components/locale-selector), [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) o [`useSetLocale`](/docs/react/reference/hooks/use-set-locale) salva la scelta e applica le nuove traduzioni in modo diverso a seconda del framework:

* **React:** salva l&#39;impostazione regionale in un cookie, quindi ricarica la pagina per impostazione predefinita. Un callback di ricaricamento personalizzato del provider può sostituire il ricaricamento dell&#39;intera pagina.
* **Next.js App Router:** salva l&#39;impostazione regionale in un cookie, quindi aggiorna l&#39;albero dei componenti server. Il middleware delle impostazioni regionali applica il routing dei percorsi configurato.
* **Next.js Pages Router:** salva l&#39;impostazione regionale in un cookie. Configura il callback di ricaricamento del provider per navigare con Pages Router e recuperare le props della pagina per l&#39;impostazione regionale selezionata.
* **TanStack Start:** salva l&#39;impostazione regionale in un cookie, quindi ricarica la pagina. Con [`localeRouting`](/docs/react/reference/config#locale-routing) abilitato, passa al pathname dell&#39;impostazione regionale corrispondente.
* **React Native:** salva l&#39;impostazione regionale nell&#39;archiviazione nativa (o in `localStorage` su React Native Web), aggiorna lo stato del provider, carica le traduzioni per l&#39;impostazione regionale e renderizza nuovamente senza navigare nel browser.

Per le pagine pubbliche, gli URL basati sulle impostazioni regionali rendono ogni versione linguistica condivisibile e indicizzabile. Configura il routing nella guida specifica del framework:

* [Middleware App Router di Next.js](/docs/react/nextjs/app-router-middleware)
* [Routing delle impostazioni regionali di Next.js Pages Router](/docs/react/nextjs/pages-router-middleware)
* [Routing delle impostazioni regionali di TanStack Start](/docs/react/tanstack-start/setup#locale-routing)

## Leggi l&#39;impostazione regionale attiva [#read]

Usa gli hook dell&#39;impostazione regionale quando renderizzi UI specifiche per la lingua:

* [`useLocale`](/docs/react/reference/hooks/use-locale) restituisce il codice locale attivo.
* [`useDefaultLocale`](/docs/react/reference/hooks/use-default-locale) restituisce l&#39;impostazione regionale sorgente.
* [`useLocales`](/docs/react/reference/hooks/use-locales) restituisce tutti i codici delle impostazioni regionali supportate.
* [`useLocaleDirection`](/docs/react/reference/hooks/use-locale-direction) restituisce `'ltr'` o `'rtl'` per definire il layout della pagina.
* [`useLocaleProperties`](/docs/react/reference/hooks/use-locale-properties) restituisce il nome, il nome nativo, la regione, lo script e altri metadati di visualizzazione di un&#39;impostazione regionale.

*Nota: `gt-tanstack-start` al momento non esporta [`useLocaleDirection`](/docs/react/reference/hooks/use-locale-direction) né [`useLocaleProperties`](/docs/react/reference/hooks/use-locale-properties). Leggi invece i metadati dell&#39;impostazione regionale con [`getLocaleProperties`](/docs/platform/core/reference/utility-functions/locales/get-locale-properties) da `generaltranslation`.*

In Next.js, questi hook funzionano nei componenti server sincroni di App Router. Nei componenti asincroni, chiama [`getLocale`](/docs/react/nextjs/reference/functions/get-locale) e [`getLocaleDirection`](/docs/react/nextjs/reference/functions/get-locale-direction) da `gt-next/server`:

```tsx
import { getLocale, getLocaleDirection } from 'gt-next/server';

async function Layout() {
  const locale = await getLocale();
  const dir = await getLocaleDirection();
  return <html lang={locale} dir={dir} />;
}
```

Consulta la pagina di riferimento di [`useLocale`](/docs/react/reference/hooks/use-locale) per informazioni sulla corrispondenza delle impostazioni regionali e sul comportamento di fallback.
## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/configuring
- /docs/react/guides/storing-translations