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

title: RegionSelector
description: Affiche un menu déroulant permettant de changer la région active avec General Translation gt-react. Référence de l’API pour RegionSelector.

---

Le composant `<RegionSelector>` affiche un menu déroulant qui permet aux utilisateurs de changer la région active. Il s’agit d’un composant client qui lit les données de région depuis le contexte [`<GTProvider>`](/docs/react/reference/components/gt-provider).

*Disponible dans `gt-react` et `gt-next`. Les exemples importent depuis `gt-react` ; importez plutôt depuis le package de votre framework.*

*Remarque : non exporté par `gt-tanstack-start` ou `gt-react-native`.*

## Vue d’ensemble [#overview]

Affichez `<RegionSelector>` dans votre provider. Sans props, il détermine automatiquement les régions à partir des paramètres régionaux pris en charge.

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

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

*Remarque : `<RegionSelector>` est disponible uniquement côté client et renvoie un élément `<select>` (ou `null` lorsqu’aucune région n’est disponible). Pour un sélecteur entièrement personnalisé, utilisez le hook [`useRegionSelector`](/docs/react/reference/hooks/use-region-selector).*

## Fonctionnement [#how-it-works]

* **Lit le contexte.** Par défaut, les régions sont déduites des paramètres régionaux pris en charge dans le contexte `<GTProvider>`. Fournissez `regions` pour afficher un ensemble précis.
* **Change la région.** La sélection d&#39;une option définit la région active. Avec `asLocaleSelector`, cela met également à jour le paramètre régional pour utiliser celui associé à la région.
* **Transmet les props.** Toutes les props supplémentaires sont transmises à l&#39;élément `<select>` sous-jacent.

## Props [#props]

| Prop                                           | Description                                                                    | Type        | Facultatif | Par défaut |
| ---------------------------------------------- | ------------------------------------------------------------------------------ | ----------- | ---------- | ---------- |
| [`regions`](#regions)                          | Sous-ensemble des codes de région ISO 3166 à afficher.                         | `string[]`  | Oui        | Déduit     |
| [`placeholder`](#placeholder)                  | Contenu de l’espace réservé pour la première option.                           | `ReactNode` | Oui        | —          |
| [`customMapping`](#custom-mapping)             | Noms d’affichage, émojis ou paramètres régionaux personnalisés par région.     | `object`    | Oui        | —          |
| [`prioritizeCurrentLocaleRegion`](#prioritize) | Place en premier la région du paramètre régional actuel.                       | `boolean`   | Oui        | `true`     |
| [`sortRegionsAlphabetically`](#sort)           | Trie les régions par ordre alphabétique selon leur nom d’affichage.            | `boolean`   | Oui        | `true`     |
| [`asLocaleSelector`](#as-locale-selector)      | Met également à jour le paramètre régional lorsqu’une région est sélectionnée. | `boolean`   | Oui        | `false`    |

### `regions` [#regions]

**Type** `string[]` · **Facultatif** · **Par défaut** Déduit

Un tableau de codes de région ISO 3166 à afficher, par exemple `['US', 'CA', 'GB']`. Lorsqu’il est omis, les régions sont déduites des paramètres régionaux pris en charge.

### `placeholder` [#placeholder]

**Type** `ReactNode` · **Facultatif**

Contenu d’espace réservé affiché comme première option lorsqu’aucune région n’est sélectionnée.

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

**Type** `object` · **Facultatif**

Un mapping entre des codes de région et des données d’affichage personnalisées. Chaque valeur peut être une chaîne de caractères (nom d’affichage) ou un objet avec les propriétés `name`, `emoji` et/ou `locale`.

### `prioritizeCurrentLocaleRegion` [#prioritize]

**Type** `boolean` · **Facultatif** · **Par défaut** `true`

Lorsque `true`, la région correspondant au paramètre régional actuel est placée en tête de liste.

### `sortRegionsAlphabetically` [#sort]

**Type** `boolean` · **Facultatif** · **Par défaut** `true`

Lorsque `true`, les régions sont triées par ordre alphabétique en fonction de leur nom d’affichage.

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

**Type** `boolean` · **Facultatif** · **Par défaut** `false`

Lorsque la valeur est `true`, la sélection d’une région met également à jour le paramètre régional en le remplaçant par celui associé à cette région.

## Exemples [#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: '🇬🇧' },
      }}
    />
  );
}
```

## Remarques [#notes]

* `<RegionSelector>` est uniquement disponible côté client.
* Pour obtenir la région active, utilisez [`useRegion`](/docs/react/reference/hooks/use-region) ; pour créer un sélecteur personnalisé, utilisez [`useRegionSelector`](/docs/react/reference/hooks/use-region-selector).
* Pour l’équivalent pour le paramètre régional, consultez [`<LocaleSelector>`](/docs/react/reference/components/locale-selector).