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

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


## Vue d’ensemble

Le hook `useRegionSelector` fournit les données et les gestionnaires nécessaires pour implémenter un composant d’interface utilisateur personnalisé de sélecteur de région. Il renvoie la région actuelle, une liste des régions disponibles, les métadonnées de la région, ainsi que des fonctions pour mettre à jour la région ou le paramètre régional.

<Callout>
  `useRegionSelector` est un hook côté client et *ne peut être utilisé que dans des composants côté client*.
  Assurez-vous que votre application est enveloppée dans un [`<GTProvider>`](/docs/react/api/components/gtprovider).
</Callout>

## Référence

### Paramètres

Objet de configuration facultatif :

| Paramètre                       | Type       | Par défaut | Description                                                                                                                                                                                                                                                                       |
| ------------------------------- | ---------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `regions`                       | `string[]` | —          | Tableau facultatif des codes de région ISO 3166 à afficher. S’il n’est pas fourni, les régions sont déduites des paramètres régionaux pris en charge.                                                                                                                             |
| `customMapping`                 | `object`   | —          | Objet de correspondance facultatif permettant de remplacer les noms d’affichage des régions, les émojis ou les 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 cette valeur est `true`, la région correspondant au paramètre régional actuel est placée en priorité 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.                                                                                                                                                                            |

### Renvoie

Un objet contenant :

| Champ        | Type                                    | Description                                                                                        |
| ------------ | --------------------------------------- | -------------------------------------------------------------------------------------------------- |
| `region`     | `string \| undefined`                   | Le code de région actuellement sélectionné.                                                        |
| `setRegion`  | `(region: string \| undefined) => void` | Fonction permettant de mettre à jour la région sélectionnée.                                       |
| `regions`    | `string[]`                              | Tableau des codes de région disponibles.                                                           |
| `regionData` | `Map<string, RegionData>`               | Map associant les codes de région à leurs données d’affichage (`code`, `name`, `emoji`, `locale`). |
| `locale`     | `string`                                | Le paramètre régional actuel.                                                                      |
| `setLocale`  | `(locale: string) => void`              | Fonction permettant de mettre à jour le paramètre régional.                                        |

***

## Exemples

### Créer un sélecteur de région personnalisé

```jsx title="CustomRegionSelector.jsx" copy
'use client';
import { useRegionSelector } from 'gt-react';

export default function CustomRegionSelector() {
  const { region, setRegion, regions, regionData } = useRegionSelector({ // [!code highlight]
    customMapping: { US: { name: "United States", emoji: "🇺🇸" } }, // [!code highlight]
  }); // [!code highlight]

  return (
    <select value={region} onChange={(e) => setRegion(e.target.value)}>
      {regions.map((r) => (
        <option key={r} value={r}>
          {regionData.get(r)?.emoji} {regionData.get(r)?.name}
        </option>
      ))}
    </select>
  );
}
```

***


## Remarques

* Si `regions` n’est pas fourni, les régions disponibles sont déduites des paramètres régionaux pris en charge configurés dans votre [`gt.config.json`](/docs/react/api/config/gt-config-json).
* Pour utiliser un sélecteur de région prêt à l’emploi, utilisez le composant [`<RegionSelector>`](/docs/react/api/components/region-selector).

## Prochaines étapes

* Consultez [`<RegionSelector>`](/docs/react/api/components/region-selector) pour un composant de menu déroulant prêt à l’emploi.
* Consultez [`useRegion`](/docs/react/api/helpers/use-region) pour obtenir la région actuelle.
* Consultez [`useLocaleSelector`](/docs/react/api/helpers/use-locale-selector) pour l’équivalent côté paramètre régional.