# General Translation React SDKs (gt-react, gt-next): Gestire le impostazioni regionali
URL: https://generaltranslation.com/it/docs/react/guides/managing-locales.mdx
---
title: Gestire le impostazioni regionali
description: Come consentire agli utenti di cambiare lingua e leggere l'impostazione regionale attiva con General Translation in React, Next.js, TanStack Start e React Native.
related:
  links:
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/configuring
    - /docs/react/guides/storing-translations

---

La tua app dichiara quali impostazioni regionali supporta, consente agli utenti di sceglierne una e legge l'impostazione regionale attiva per visualizzare i contenuti di conseguenza. Questa guida illustra ogni aspetto.

## Dichiara le impostazioni regionali supportate [#declare]

Elenca l'impostazione regionale predefinita e le impostazioni regionali di destinazione in `gt.config.json`. Sono le impostazioni regionali tra cui la tua app può passare.

```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, il plugin `withGTConfig` legge automaticamente `gt.config.json`, quindi non è necessaria alcuna inizializzazione manuale. Vedi [Configurare General Translation](/docs/react/guides/configuring) per ciascuna configurazione.

## Aggiungi un selettore della lingua [#switcher]

Aggiungi [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) per avere un menu a discesa già pronto con le tue impostazioni regionali supportate. Quando l&#39;utente ne seleziona una, l&#39;impostazione regionale attiva cambia.

<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 fornisce un componente `<LocaleSelector>` predefinito. Creane uno personalizzato con [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector) (oppure [`useSetLocale`](/docs/react/reference/hooks/use-set-locale) e [`useLocales`](/docs/react/reference/hooks/use-locales)), come mostrato di seguito.*
  </Tab>
</Tabs>

Per creare il tuo selettore, usa `useSetLocale` per cambiare l&#39;impostazione regionale e `useLocales` per elencare le opzioni. Questi hook sono disponibili in tutti i framework; importali dal pacchetto del tuo framework.

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

function Switcher() {
  const locale = useLocale();
  const locales = useLocales();
  const setLocale = useSetLocale();
  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      {locales.map((l) => <option key={l} value={l}>{l}</option>)}
    </select>
  );
}
```

*Nota: cambiando l&#39;impostazione regionale, la scelta viene mantenuta — tramite un cookie sul web (React, Next.js, TanStack Start) o l&#39;archivio nativo in React Native — e l&#39;applicazione viene ricaricata per visualizzare le nuove traduzioni.*

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

Usa gli hook per leggere lo stato dell&#39;impostazione regionale nei tuoi componenti:

* [`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.
* [`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 i metadati di visualizzazione di un&#39;impostazione regionale, come il nome.

*Nota: `gt-tanstack-start` al momento non esporta `useLocaleDirection` né `useLocaleProperties`. Leggi invece i metadati dell&#39;impostazione regionale con `getLocaleProperties` da `generaltranslation`.*

Questi hook funzionano nei componenti server sincroni di App Router. Nei componenti App Router asincroni, usa invece [`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} />;
}
```

*Nota: In Next.js, il rilevamento e la persistenza dell&#39;impostazione regionale al momento della richiesta vengono gestiti nel middleware, come descritto nelle pagine del framework Next.js.*

Consulta il [riferimento sugli Hooks](/docs/react/reference/hooks/use-locale) per l&#39;elenco completo.
## Next steps

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