# gt-next: General Translation Next.js SDK: useRegionSelector
URL: https://generaltranslation.com/it/docs/next/api/helpers/use-region-selector.mdx
---
title: useRegionSelector
description: Riferimento API dell'hook useRegionSelector
---

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


## Panoramica

L'hook `useRegionSelector` fornisce i dati e gli handler necessari per implementare un componente dell'interfaccia utente personalizzato per la selezione della regione. Restituisce la regione corrente, un elenco delle regioni disponibili, i metadati della regione e le funzioni per aggiornare la regione o l'impostazione regionale.

<Callout>
  `useRegionSelector` è un hook lato client e *può essere usato solo nei componenti lato client*.
  Assicurati che la tua app sia racchiusa in [`<GTProvider>`](/docs/next/api/components/gtprovider).
</Callout>

## Riferimento

### Parametri

Un oggetto di configurazione facoltativo:

| Parameter                       | Type       | Default | Description                                                                                                                                                                                                                          |
| ------------------------------- | ---------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `regions`                       | `string[]` | —       | Un array facoltativo di codici di regione ISO 3166 da visualizzare. Se non viene fornito, le regioni vengono dedotte dalle locales supportate.                                                                                       |
| `customMapping`                 | `object`   | —       | Mappatura facoltativa per sovrascrivere i nomi visualizzati delle regioni, le emoji o le locales associate. I valori possono essere una stringa (nome visualizzato) oppure un oggetto con le proprietà `name`, `emoji` e/o `locale`. |
| `prioritizeCurrentLocaleRegion` | `boolean`  | `true`  | Se è `true`, la regione corrispondente all&#39;impostazione regionale corrente ha la priorità nell&#39;elenco.                                                                                                                       |
| `sortRegionsAlphabetically`     | `boolean`  | `true`  | Se è `true`, le regioni vengono ordinate alfabeticamente in base al nome visualizzato.                                                                                                                                               |

### Restituisce

Un oggetto contenente:

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

***

## Esempi

### Crea un selettore di regione personalizzato

```jsx title="CustomRegionSelector.jsx" copy
'use client';
import { useRegionSelector } from 'gt-next';

export default function CustomRegionSelector() {
  const { region, setRegion, regions, regionData } = useRegionSelector({ // [!code highlight]
    customMapping: { US: { name: "United States", emoji: "🇺🇸" } }, // [!code highlight]
  }); // [!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>
  );
}
```

***


## Note

* Se `regions` non è specificato, le regioni disponibili vengono dedotte dalle locales supportate configurate in [`gt.config.json`](/docs/next/api/config/gt-config-json).
* Per un selettore di regione già pronto, usa il componente [`<RegionSelector>`](/docs/next/api/components/region-selector).

## Passaggi successivi

* Vedi [`<RegionSelector>`](/docs/next/api/components/region-selector) per un componente a discesa pronto all&#39;uso.
* Vedi [`useRegion`](/docs/next/api/helpers/use-region) per leggere la regione corrente.
* Vedi [`useLocaleSelector`](/docs/next/api/helpers/use-locale-selector) per l&#39;equivalente relativo all&#39;impostazione regionale.