# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<LocaleSelector>`
URL: https://generaltranslation.com/fr/docs/react/reference/components/locale-selector.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Affiche un menu déroulant pour changer le paramètre régional actif. Référence de l’API pour le composant `<LocaleSelector>`.

Le composant `<LocaleSelector>` est un menu déroulant côté client prêt à l’emploi qui reprend les locales configurées de votre application, afin que vous puissiez ajouter un sélecteur de langue fonctionnel sans avoir à créer le vôtre.

*Disponible dans `gt-react`, `gt-next` et `gt-tanstack-start`.*

*Remarque : non exporté par `gt-react-native`. Pour un sélecteur personnalisé, utilisez [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector).*

## Vue d’ensemble [#overview]

Affichez `<LocaleSelector>` n’importe où dans un composant client. Sans aucune prop, il affiche la liste des locales configurées.

*Les exemples importent depuis `gt-react` ; importez plutôt depuis le paquet de votre framework.*

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

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

*Remarque : `<LocaleSelector>` est uniquement disponible côté client. Pour un sélecteur entièrement personnalisé, utilisez le hook [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector).*

## Fonctionnement [#how-it-works]

* **Lit le contexte.** Par défaut, les options proviennent des paramètres régionaux prises en charge dans le contexte [`<GTProvider>`](/docs/react/reference/components/gt-provider). Fournissez `locales` pour n’en afficher qu’un sous-ensemble.
* **Change le paramètre régional.** La sélection d’une option enregistre le paramètre régional active et applique le comportement d’actualisation, de rechargement ou de navigation du framework. Consultez [Gestion des paramètres régionaux](/docs/react/guides/managing-locales#persistence).
* **N’affiche rien s’il n’y a rien à afficher.** Le composant renvoie `null` lorsqu’aucun paramètre régional n’est disponible.

## Props [#props]

| Prop                                   | Description                                                     | Type                                                  | Facultatif | Par défaut |
| -------------------------------------- | --------------------------------------------------------------- | ----------------------------------------------------- | ---------- | ---------- |
| [`locales`](#locales)                  | Sous-ensemble des locales à afficher.                           | `string[]`                                            | Oui        | Tous       |
| [`customMapping`](#custom-mapping)     | Libellés d’options personnalisés pour les locales.              | `Record<string, string \| Partial<LocaleProperties>>` | Oui        | —          |
| [`customNames`](#custom-names)         | Mappage déprécié de code vers libellé.                          | `Record<string, string>`                              | Oui        | —          |
| [attribut de Select](#select-attributes) | Attributs standard transmis à l’élément `<select>` sous-jacent. | `React.SelectHTMLAttributes<HTMLSelectElement>`       | Oui        | —          |

### `locales` [#locales]

**Type** `string[]` · **Facultatif** · **Par défaut** Toutes prises en charge

Un sous-ensemble de codes de langue à afficher dans le menu déroulant, par exemple `['en', 'es-MX', 'fr']`. Lorsqu&#39;elle est omise, les `paramètres régionaux` du contexte [`<GTProvider>`](/docs/react/reference/components/gt-provider) sont utilisées.

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

**Type** `Record<string, string | Partial<LocaleProperties>>` · **Facultatif**

Correspondance associant des codes de langue à des libellés d’options personnalisés. Les valeurs de type chaîne sont utilisées directement ; pour les valeurs objet, la propriété `name` de [`LocaleProperties`](/docs/platform/core/reference/types/locale-properties) est utilisée. Les autres propriétés du paramètre régional ne modifient pas le libellé affiché.

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

**Type** `Record<string, string>` · **Facultatif** · **Déprécié**

Ancienne correspondance entre codes et libellés, conservée pour des raisons de compatibilité. Utilisez plutôt `customMapping`. Lorsque les deux props sont fournis, `customMapping` prévaut.

### Attributs de Select [#select-attributes]

Les attributs standard de `<select>`, tels que `className`, `disabled` et `aria-describedby`, sont transmis à l’élément affiché. Le composant contrôle `value` et `onChange` afin que la sélection d’une option mette à jour le paramètre régional actif.

## Exemples [#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} />;
}
```

## Notes [#notes]

* `<LocaleSelector>` est disponible uniquement côté client.
* Pour connaître le paramètre régional actif, utilisez [`useLocale`](/docs/react/reference/hooks/use-locale) ; pour créer un sélecteur personnalisé, utilisez [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector).

## Sitemap

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