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

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


## 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/next/api/components/gtprovider).

## Référence

### Renvoie

Un élément `<select>` permettant à l’utilisateur de choisir 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 à afficher (par ex. `['US', 'CA', 'GB']`). S’il n’est pas fourni, les régions sont déduites des paramètres régionaux pris en charge.                                                                              |
| `placeholder`                   | `ReactNode` | —          | Contenu facultatif d’espace réservé à afficher comme première option lorsqu’aucune région n’est sélectionnée.                                                                                                                                                   |
| `customMapping`                 | `object`    | —          | Mappage facultatif entre les codes de région et des noms d’affichage, émojis ou 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 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 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-next';

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


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

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

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>` est uniquement côté client.
* Pour une interface de sélecteur de région entièrement personnalisée, utilisez le Hook [`useRegionSelector`](/docs/next/api/helpers/use-region-selector).

## Étapes suivantes

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