# gt-next: General Translation Next.js SDK: RegionSelector
URL: https://generaltranslation.com/it/docs/next/api/components/region-selector.mdx
---
title: RegionSelector
description: Riferimento API per il componente RegionSelector
---

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


## Panoramica

Il componente `<RegionSelector>` è un menu a discesa che consente agli utenti di selezionare la propria regione.
È un componente lato client che legge i dati relativi alla regione dal [contesto di `<GTProvider>`](/docs/next/api/components/gtprovider).

## Riferimento

### Restituisce

Un elemento `<select>` che consente all&#39;utente di scegliere la propria regione, oppure `null` se non è disponibile alcuna regione.

### Proprietà

| Prop                            | Tipo        | Predefinito | Descrizione                                                                                                                                                                                                                                                       |
| ------------------------------- | ----------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `regions`                       | `string[]`  | —           | Array facoltativo di codici della regione ISO 3166 da visualizzare (ad esempio `['US', 'CA', 'GB']`). Se non viene fornito, le regioni vengono ricavate dalle impostazioni regionali supportate.                                                                  |
| `placeholder`                   | `ReactNode` | —           | Contenuto segnaposto facoltativo da mostrare come prima opzione quando non è selezionata alcuna regione.                                                                                                                                                          |
| `customMapping`                 | `object`    | —           | Mappatura facoltativa dei codici della regione a nomi di visualizzazione personalizzati, emoji o impostazioni regionali associate. I valori possono essere una stringa (nome di visualizzazione) 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 priorità nell&#39;elenco.                                                                                                                                                           |
| `sortRegionsAlphabetically`     | `boolean`   | `true`      | Se true, le regioni vengono ordinate alfabeticamente in base al nome di visualizzazione.                                                                                                                                                                          |
| `asLocaleSelector`              | `boolean`   | `false`     | Se true, selezionando una regione viene aggiornata anche l&#39;impostazione regionale associata a quella regione.                                                                                                                                                 |

Le proprietà aggiuntive vengono passate all&#39;elemento `<select>` sottostante.

## Esempi

### Uso di base

```jsx title="MyComponent.jsx" copy
import { RegionSelector } from 'gt-next';

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


### Con mappatura personalizzata e segnaposto

```jsx title="CustomRegion.jsx" copy
import { RegionSelector } from 'gt-next';

export default function CustomRegion() {
  return (
    <RegionSelector
      regions={['US', 'CA', 'GB']}
      placeholder="Select a region"
      customMapping={{
        US: { name: "United States", emoji: "🇺🇸" },
        CA: { name: "Canada", emoji: "🇨🇦" },
        GB: { name: "United Kingdom", emoji: "🇬🇧" },
      }}
    />
  );
}
```

***


## Note

* Il componente `<RegionSelector>` è disponibile solo lato client.
* Per un&#39;interfaccia utente del selettore di regione completamente personalizzata, usa l&#39;hook [`useRegionSelector`](/docs/next/api/helpers/use-region-selector).

## Passaggi successivi

* Consulta [`useRegionSelector`](/docs/next/api/helpers/use-region-selector) per creare un selettore di regione personalizzato.
* Consulta [`useRegion`](/docs/next/api/helpers/use-region) per leggere la regione corrente.
* Consulta [`<LocaleSelector>`](/docs/next/api/components/locale-selector) per l&#39;equivalente relativo all&#39;impostazione regionale.