# General Translation React SDKs (gt-react, gt-next): useRegionSelector
URL: https://generaltranslation.com/it/docs/react/reference/hooks/use-region-selector.mdx
---

title: useRegionSelector
description: Crea un selettore di regioni personalizzato con General Translation gt-react. Riferimento API per useRegionSelector.

---

L'hook `useRegionSelector` restituisce i dati e gli handler necessari per creare un selettore di regioni personalizzato: la regione attiva, le regioni disponibili, i metadati relativi alla regione e le funzioni per aggiornare la regione o l'impostazione regionale.

*Disponibile in `gt-react` e `gt-react-native`. Gli esempi importano da `gt-react`; importa invece dal pacchetto del framework che usi.*

*Nota: non è esportato da `gt-next` o `gt-tanstack-start`.*

## Panoramica [#overview]

Richiama `useRegionSelector` e collega i relativi valori alla tua interfaccia utente.

```tsx
'use client';
import { useRegionSelector } from 'gt-react';

export default function CustomRegionSelector() {
  const { region, setRegion, regions, regionData } = useRegionSelector({ // [!code highlight]
    customMapping: { US: { name: 'United States', emoji: '🇺🇸' } }, // [!code highlight]
  });

  return (
    <select value={region} onChange={(e) => setRegion(e.target.value)}>
      {regions.map((r) => (
        <option key={r} value={r}>
          {regionData.get(r)?.emoji} {regionData.get(r)?.name}
        </option>
      ))}
    </select>
  );
}
```

*Nota: `useRegionSelector` è disponibile solo sul client e deve essere utilizzato all&#39;interno di un [`<GTProvider>`](/docs/react/reference/components/gt-provider). Se non ti serve un&#39;interfaccia utente personalizzata, usa invece il componente [`<RegionSelector>`](/docs/react/reference/components/region-selector).*

## Come funziona [#how-it-works]

L&#39;hook restituisce la regione attiva, l&#39;elenco ordinato delle regioni, una mappa `regionData` con i metadati di visualizzazione e i setter per la regione e l&#39;impostazione regionale. Se `regions` non viene fornito, le regioni disponibili vengono ricavate dalle impostazioni regionali supportate.

## Parametri [#parameters]

`useRegionSelector` accetta un oggetto di configurazione opzionale.

| Parametro                                      | Descrizione                                                                        | Tipo       | Facoltativo | Predefinito |
| ---------------------------------------------- | ---------------------------------------------------------------------------------- | ---------- | ----------- | ----------- |
| [`regions`](#regions)                          | Sottoinsieme dei codici regione ISO 3166 da visualizzare.                          | `string[]` | Sì          | Dedotto     |
| [`customMapping`](#custom-mapping)             | Nomi visualizzati, emoji o impostazioni regionali personalizzati per ogni regione. | `object`   | Sì          | —           |
| [`prioritizeCurrentLocaleRegion`](#prioritize) | Posiziona per prima la regione dell&#39;impostazione regionale corrente.           | `boolean`  | Sì          | `true`      |
| [`sortRegionsAlphabetically`](#sort)           | Ordina le regioni alfabeticamente in base al nome visualizzato.                    | `boolean`  | Sì          | `true`      |

### `regions` [#regions]

**Tipo** `string[]` · **Facoltativo** · **Predefinito** Dedotto

Codici regione ISO 3166 da visualizzare. Se omessi, le regioni vengono dedotte dalle impostazioni regionali supportate.

### `customMapping` [#custom-mapping]

**Tipo** `object` · **Opzionale**

Mappatura dei codici regione a dati di visualizzazione personalizzati. Ciascun valore può essere una stringa (nome visualizzato) oppure un oggetto con le proprietà `name`, `emoji` e/o `locale`.

### `prioritizeCurrentLocaleRegion` [#prioritize]

**Tipo** `boolean` · **Facoltativo** · **Predefinito** `true`

Quando è `true`, la regione corrispondente all&#39;impostazione regionale corrente ha la priorità nell&#39;elenco.

### `sortRegionsAlphabetically` [#sort]

**Tipo** `boolean` · **Facoltativo** · **Predefinito** `true`

Se è `true`, le regioni vengono ordinate alfabeticamente in base al nome visualizzato.

## Restituisce [#returns]

**Tipo** `object`

| Campo          | Descrizione                                                                                           | Tipo                                    |
| -------------- | ----------------------------------------------------------------------------------------------------- | --------------------------------------- |
| `region`       | Il codice regione attualmente selezionato.                                                            | `string \| undefined`                   |
| `setRegion`    | Aggiorna la regione selezionata.                                                                      | `(region: string \| undefined) => void` |
| `regions`      | I codici regione disponibili.                                                                         | `string[]`                              |
| `regionData`   | Mappa che associa i codici regione ai dati di visualizzazione (`code`, `name`, `emoji`, `locale`).   | `Map<string, RegionData>`               |
| `locale`       | L&#39;impostazione regionale corrente.                                                                | `string`                                |
| `setLocale`    | Aggiorna l&#39;impostazione regionale.                                                                | `(locale: string) => void`              |
| `localeRegion` | Il codice regione ISO 3166 dell&#39;impostazione regionale corrente.                                  | `string`                                |

## Note [#notes]

* `useRegionSelector` è disponibile solo lato client.
* Per un menu a discesa pronto all&#39;uso, usa [`<RegionSelector>`](/docs/react/reference/components/region-selector).
* Per l&#39;equivalente per l&#39;impostazione regionale, vedi [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector).