# react-native: RegionSelector
URL: https://generaltranslation.com/it/docs/react-native/api/components/region-selector.mdx
---
title: RegionSelector
description: Riferimento API del componente RegionSelector
---

{/* GENERATO AUTOMATICAMENTE: Non modificare direttamente. Modifica il modello 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 sulla regione dal [contesto di `<GTProvider>`](/docs/react-native/api/components/gtprovider).

## Riferimento

### Restituisce

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

### Prop

| Prop                            | Tipo        | Predefinito | Descrizione                                                                                                                                                                                                                                              |
| ------------------------------- | ----------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `regions`                       | `string[]`  | —           | Un array facoltativo di codici della regione ISO 3166 (ad es. `['US', 'CA', 'GB']`) da visualizzare. Se non viene fornito, le regioni vengono dedotte dalle impostazioni regionali supportate.                                                           |
| `placeholder`                   | `ReactNode` | —           | Contenuto segnaposto facoltativo da mostrare come prima opzione quando non è selezionata alcuna regione.                                                                                                                                                 |
| `customMapping`                 | `object`    | —           | Mapeo facoltativo dei codici della regione a nomi di visualizzazione personalizzati, emoji o impostazioni regionali associate. I valori possono essere una stringa (nome di visualizzazione) o un oggetto con le proprietà `name`, `emoji` e/o `locale`. |
| `prioritizeCurrentLocaleRegion` | `boolean`   | `true`      | Se impostato su true, la regione corrispondente all&#39;impostazione regionale corrente ha la priorità nell&#39;elenco.                                                                                                                                  |
| `sortRegionsAlphabetically`     | `boolean`   | `true`      | Se impostato su true, le regioni vengono ordinate alfabeticamente in base al nome di visualizzazione.                                                                                                                                                    |
| `asLocaleSelector`              | `boolean`   | `false`     | Se impostato su true, la selezione di una regione aggiorna anche l&#39;impostazione regionale associata a quella regione.                                                                                                                                |

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

## Esempi

### Utilizzo di base

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

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


### Con mappatura personalizzata e segnaposto

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

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;[`useRegionSelector`](/docs/react-native/api/helpers/use-region-selector) hook.

## Passaggi successivi

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