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

title: LocaleSelector
description: Visualizza un menu a discesa per cambiare l'impostazione regionale attiva con General Translation gt-react. Riferimento API per LocaleSelector.

---

Il componente `<LocaleSelector>` visualizza un menu a discesa che consente agli utenti di cambiare l&#39;impostazione regionale attiva. È un componente lato client.

*Disponibile in `gt-react`, `gt-next` e `gt-tanstack-start`. Gli esempi importano da `gt-react`; importa invece dal pacchetto del tuo framework.*

*Nota: non è esportato da `gt-react-native`. Per un selettore personalizzato, usa [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector).*

## Panoramica [#overview]

Renderizza `<LocaleSelector>` in qualsiasi componente client. Senza props, mostra l&#39;elenco delle impostazioni regionali configurate.

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

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

*Nota: `<LocaleSelector>` è disponibile solo sul client. Per un selettore completamente personalizzato, usa l&#39;hook [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector).*

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

* **Legge il contesto.** Per impostazione predefinita, le opzioni provengono dalle impostazioni regionali supportate nel contesto di `<GTProvider>`. Fornisci `locales` per mostrare un sottoinsieme.
* **Cambia l&#39;impostazione regionale.** La selezione di un&#39;opzione imposta l&#39;impostazione regionale attiva, memorizza la scelta e ricarica la pagina.
* **Non mostra nulla se è vuoto.** Il componente restituisce `null` quando non sono disponibili impostazioni regionali.

## Props [#props]

| Prop                               | Descrizione                                                        | Type       | Facoltativo | Predefinito             |
| ---------------------------------- | ------------------------------------------------------------------ | ---------- | ----------- | ----------------------- |
| [`locales`](#locales)              | Un sottoinsieme delle locales da visualizzare.                     | `string[]` | Sì          | Tutte quelle supportate |
| [`customMapping`](#custom-mapping) | Nomi di visualizzazione personalizzati o proprietà per le locales. | `object`   | Sì          | —                       |

### `locales` [#locales]

**Tipo** `string[]` · **Facoltativo** · **Predefinito** Tutte quelle supportate

Un sottoinsieme di codici locale per popolare il menu a discesa, ad esempio `['en', 'es-MX', 'fr']`. Se omesso, vengono usate le impostazioni regionali definite nel contesto `<GTProvider>`.

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

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

Una mappatura dei codici locale a nomi di visualizzazione personalizzati, emoji o altre proprietà. *Nota: la vecchia prop `customNames` (una semplice mappa da codice a nome) è deprecata a favore di `customMapping`.*

## Esempi [#examples]

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

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

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

export default function MyComponent() {
  const customMapping = {
    en: 'English',
    es: 'Español',
    'fr-CA': 'Français (Canada)',
  };
  return <LocaleSelector customMapping={customMapping} />;
}
```

## Note [#notes]

* `<LocaleSelector>` è disponibile solo lato client.
* Per leggere l&#39;impostazione regionale attiva, usa [`useLocale`](/docs/react/reference/hooks/use-locale); per creare un selettore personalizzato, usa [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector).