# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<LocaleSelector>`
URL: https://generaltranslation.com/it/docs/react/reference/components/locale-selector.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Renderizza un menu a discesa per cambiare l'impostazione regionale attiva. Riferimento API per il componente `<LocaleSelector>`.

Il componente `<LocaleSelector>` è un menu a discesa lato client predefinito delle impostazioni regionali configurate della tua app, così puoi aggiungere un selettore della lingua funzionante senza doverne creare uno tuo.

*Disponibile in `gt-react`, `gt-next` e `gt-tanstack-start`.*

*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.

*Gli esempi importano da `gt-react`; importa invece dal package del tuo framework.*

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

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

*Nota: `<LocaleSelector>` è disponibile solo lato 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 dai locales supportati nel contesto di [`<GTProvider>`](/docs/react/reference/components/gt-provider). Fornisci `locales` per mostrare un sottoinsieme.
* **Cambia l&#39;impostazione regionale.** La selezione di un&#39;opzione memorizza l&#39;impostazione regionale attiva e applica il comportamento di aggiornamento, ricaricamento o navigazione del framework. Vedi [Gestione dei locales](/docs/react/guides/managing-locales#persistence).
* **Non mostra nulla se è vuoto.** Il componente restituisce `null` quando non sono disponibili locales.

## Props [#props]

| Prop                                      | Descrizione                                                           | Type                                                  | Facoltativo | Predefinito             |
| ----------------------------------------- | --------------------------------------------------------------------- | ----------------------------------------------------- | ----------- | ----------------------- |
| [`locales`](#locales)                     | Un sottoinsieme delle locales da visualizzare.                        | `string[]`                                            | Sì          | Tutte quelle supportate |
| [`customMapping`](#custom-mapping)        | Etichette personalizzate delle opzioni per le locales.                | `Record<string, string \| Partial<LocaleProperties>>` | Sì          | —                       |
| [`customNames`](#custom-names)            | Mapping deprecato da codice a etichetta.                              | `Record<string, string>`                              | Sì          | —                       |
| [Attributi di select](#select-attributes) | Attributi standard inoltrati all&#39;elemento `<select>` sottostante. | `React.SelectHTMLAttributes<HTMLSelectElement>`       | 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 usati i locales definiti nel contesto [`<GTProvider>`](/docs/react/reference/components/gt-provider).

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

**Tipo** `Record<string, string | Partial<LocaleProperties>>` · **Facoltativo**

Una mappatura di codici locale a etichette di opzioni personalizzate. I valori stringa vengono utilizzati direttamente; per i valori oggetto viene utilizzata la relativa proprietà `name` di [`LocaleProperties`](/docs/platform/core/reference/types/locale-properties). Le altre proprietà della locale non modificano l&#39;etichetta renderizzata.

### `customNames` [#custom-names]

**Tipo** `Record<string, string>` · **Facoltativo** · **Deprecato**

Una mappatura obsoleta da codice a etichetta, mantenuta per compatibilità. Usa invece `customMapping`. Quando vengono fornite entrambe le props, `customMapping` ha la precedenza.

### Attributi di select [#select-attributes]

Gli attributi standard di `<select>`, come `className`, `disabled` e `aria-describedby`, vengono inoltrati all&#39;elemento renderizzato. Il componente gestisce `value` e `onChange` in modo che la selezione di un&#39;opzione aggiorni l&#39;impostazione regionale attiva.

## 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).

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.