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

title: "<LocaleSelector>"
description: Affiche un menu déroulant pour changer la locale active. 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`. Les exemples importent depuis `gt-react` ; importez plutôt depuis le package de votre framework.*

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

```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 définit le paramètre régional active, enregistre ce choix et recharge la page.
* **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) | Noms d’affichage ou propriétés personnalisés des locales.    | `object`   | 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** `object` · **Facultatif**

Un mappage de codes de langue vers des noms d’affichage personnalisés, des émojis ou d’autres propriétés. *Remarque : l’ancienne prop `customNames` (un simple mappage code-vers-nom) est dépréciée au profit de `customMapping`.*

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