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

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


## Vue d’ensemble

Le hook `useRegionSelector` fournit les données et les fonctions de gestion 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-native/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`   | —          | Mappage facultatif permettant de redéfinir les noms d’affichage des régions, les émojis ou les paramètres régionaux associés. Les valeurs peuvent être une chaîne (nom d’affichage) ou un objet avec les propriétés `name`, `emoji` et/ou `locale`. |
| `prioritizeCurrentLocaleRegion` | `boolean`  | `true`     | Si cette option est activée, la région correspondant au paramètre régional actuel est prioritaire dans la liste.                                                                                                                                    |
| `sortRegionsAlphabetically`     | `boolean`  | `true`     | Si cette option est activée, 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 qui met à 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 qui met à jour le paramètre régional.                                                     |

***

## Exemples

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

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

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 définis dans votre [`gt.config.json`](/docs/react-native/api/config/gt-config-json).
* Pour utiliser un sélecteur de région prêt à l’emploi, utilisez le composant [`<RegionSelector>`](/docs/react-native/api/components/region-selector).

## Étapes suivantes

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