# gt-react: General Translation React SDK: RegionSelector
URL: https://generaltranslation.com/fr/docs/react/api/components/region-selector.mdx
---
title: RegionSelector
description: Référence API du composant RegionSelector
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas directement. Modifiez plutôt le modèle dans content/docs-templates/. */}


## Vue d’ensemble

Le composant `<RegionSelector>` est une liste déroulante qui permet aux utilisateurs de sélectionner leur région.
Il s’agit d’un composant côté client qui lit les données de région à partir du [contexte `<GTProvider>`](/docs/react/api/components/gtprovider).

## Référence

### Renvoie

Un élément `<select>` permettant à l’utilisateur de sélectionner sa région, ou `null` si aucune région n’est disponible.

### Props

| Prop                            | Type        | Par défaut | Description                                                                                                                                                                                                                                                                 |
| ------------------------------- | ----------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `regions`                       | `string[]`  | —          | Tableau facultatif de codes de région ISO 3166 (par ex. `['US', 'CA', 'GB']`) à afficher. S’il n’est pas fourni, les régions sont déduites des paramètres régionaux pris en charge.                                                                                         |
| `placeholder`                   | `ReactNode` | —          | Contenu d’espace réservé facultatif affiché comme première option lorsqu’aucune région n’est sélectionnée.                                                                                                                                                                  |
| `customMapping`                 | `object`    | —          | Mappage facultatif associant des codes de région à des noms d’affichage, des émojis ou des paramètres régionaux associés personnalisés. Les valeurs peuvent être une chaîne de caractères (nom d’affichage) ou un objet avec les propriétés `name`, `emoji` et/ou `locale`. |
| `prioritizeCurrentLocaleRegion` | `boolean`   | `true`     | Si cette valeur est true, la région correspondant au paramètre régional actuel est prioritaire dans la liste.                                                                                                                                                               |
| `sortRegionsAlphabetically`     | `boolean`   | `true`     | Si cette valeur est true, les régions sont triées par ordre alphabétique selon leur nom d’affichage.                                                                                                                                                                        |
| `asLocaleSelector`              | `boolean`   | `false`    | Si cette valeur est true, sélectionner une région met aussi à jour le paramètre régional vers celui associé à cette région.                                                                                                                                                 |

Des props supplémentaires sont transmises à l’élément `<select>` sous-jacent.

## Exemples

### Utilisation de base

```jsx title="MyComponent.jsx" copy
import { RegionSelector } from 'gt-react';

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


### Avec mappage personnalisé et espace réservé

```jsx title="CustomRegion.jsx" copy
import { RegionSelector } from 'gt-react';

export default function CustomRegion() {
  return (
    <RegionSelector
      regions={['US', 'CA', 'GB']}
      placeholder="Sélectionner une région"
      customMapping={{
        US: { name: "United States", emoji: "🇺🇸" },
        CA: { name: "Canada", emoji: "🇨🇦" },
        GB: { name: "United Kingdom", emoji: "🇬🇧" },
      }}
    />
  );
}
```

***


## Remarques

* Le composant `<RegionSelector>` fonctionne uniquement côté client.
* Pour un sélecteur de région avec une interface entièrement personnalisée, utilisez le hook [`useRegionSelector`](/docs/react/api/helpers/use-region-selector).

## Étapes suivantes

* Consultez [`useRegionSelector`](/docs/react/api/helpers/use-region-selector) pour créer un sélecteur de région personnalisé.
* Consultez [`useRegion`](/docs/react/api/helpers/use-region) pour obtenir la région actuelle.
* Consultez [`<LocaleSelector>`](/docs/react/api/components/locale-selector) pour le composant équivalent pour le paramètre régional.