# react-native: RegionSelector
URL: https://generaltranslation.com/fr/docs/react-native/api/components/region-selector.mdx
---
title: RegionSelector
description: Référence de l’API du composant RegionSelector
---

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


## Vue d’ensemble

Le composant `<RegionSelector>` est une liste déroulante qui permet de sélectionner sa région.
Il s’agit d’un composant côté client qui récupère les données de région depuis le [contexte `<GTProvider>`](/docs/react-native/api/components/gtprovider).

## Référence

### Retourne

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

### Props

| Prop                            | Type        | Default | 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 à afficher en première option lorsqu’aucune région n’est sélectionnée.                                                                                                                                                               |
| `customMapping`                 | `object`    | —       | Mappage facultatif entre des codes de région et des noms d’affichage personnalisés, des émojis ou des paramètres régionaux associé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 la valeur est true, la région correspondant au paramètre régional actuel est prioritaire dans la liste.                                                                                                                                                               |
| `sortRegionsAlphabetically`     | `boolean`   | `true`  | Si la valeur est true, les régions sont triées par ordre alphabétique selon leur nom d’affichage.                                                                                                                                                                        |
| `asLocaleSelector`              | `boolean`   | `false` | Si la valeur est true, sélectionner une région met également à jour le paramètre régional avec 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-native';

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


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

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

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

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

## Étapes suivantes

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