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

title: RegionSelector
description: Visualizza un dropdown per cambiare la regione attiva con General Translation gt-react. Riferimento API per RegionSelector.

---

Il componente `<RegionSelector>` visualizza un dropdown che consente agli utenti di cambiare la regione attiva. È un componente lato client che legge i dati della regione dal contesto di [`<GTProvider>`](/docs/react/reference/components/gt-provider).

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

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

## Panoramica [#overview]

Renderizza `<RegionSelector>` all&#39;interno del provider. Senza props, deduce le regioni dalle impostazioni regionali supportate.

```tsx
import { RegionSelector } from 'gt-react';

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

*Nota: `<RegionSelector>` è utilizzabile solo lato client e renderizza un elemento `<select>` (oppure `null` quando non è disponibile alcuna regione). Per un selettore completamente personalizzato, usa l&#39;hook [`useRegionSelector`](/docs/react/reference/hooks/use-region-selector).*

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

* **Legge il contesto.** Per impostazione predefinita, le regioni vengono ricavate dalle impostazioni regionali supportate nel contesto `<GTProvider>`. Fornisci `regions` per mostrarne un insieme specifico.
* **Cambia la regione.** Selezionando un&#39;opzione, viene impostata la regione attiva. Con `asLocaleSelector`, viene aggiornata anche l&#39;impostazione regionale associata alla regione.
* **Pass-through props.** Eventuali props aggiuntive vengono inoltrate all&#39;elemento `<select>` sottostante.

## Props [#props]

| Prop                                           | Descrizione                                                                       | Type        | Facoltativo | Predefinito |
| ---------------------------------------------- | --------------------------------------------------------------------------------- | ----------- | ----------- | ----------- |
| [`regions`](#regions)                          | Sottoinsieme dei codici regionali ISO 3166 da mostrare.                           | `string[]`  | Sì          | Dedotto     |
| [`placeholder`](#placeholder)                  | Contenuto segnaposto per la prima opzione.                                        | `ReactNode` | Sì          | —           |
| [`customMapping`](#custom-mapping)             | Nomi visualizzati, emoji o locales personalizzati per regione.                    | `object`    | Sì          | —           |
| [`prioritizeCurrentLocaleRegion`](#prioritize) | Mette 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`      |
| [`asLocaleSelector`](#as-locale-selector)      | Aggiorna anche l&#39;impostazione regionale quando viene selezionata una regione. | `boolean`   | Sì          | `false`     |

### `regions` [#regions]

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

Un array di codici di regione ISO 3166 da visualizzare, ad esempio `['US', 'CA', 'GB']`. Se omesso, le regioni vengono dedotte dalle impostazioni regionali supportate.

### `placeholder` [#placeholder]

**Tipo** `ReactNode` · **Facoltativo**

Contenuto visualizzato come prima opzione quando non è selezionata alcuna regione.

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

**Tipo** `object` · **Facoltativo**

Una mappatura che associa i codici regionali a dati di visualizzazione personalizzati. Ogni 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 viene visualizzata in cima all&#39;elenco.

### `sortRegionsAlphabetically` [#sort]

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

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

### `asLocaleSelector` [#as-locale-selector]

**Type** `boolean` · **Opzionale** · **Predefinito** `false`

Quando è `true`, la selezione di una regione aggiorna anche l&#39;impostazione regionale associata a quella regione.

## Esempi [#examples]

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

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

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

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 [#notes]

* `<RegionSelector>` è utilizzabile solo lato client.
* Per leggere la regione attiva, usa [`useRegion`](/docs/react/reference/hooks/use-region); per creare un selettore personalizzato, usa [`useRegionSelector`](/docs/react/reference/hooks/use-region-selector).
* Per l&#39;equivalente relativo all&#39;impostazione regionale, vedi [`<LocaleSelector>`](/docs/react/reference/components/locale-selector).