# General Translation React SDKs (gt-react, gt-next): useRegionSelector
URL: https://generaltranslation.com/fr/docs/react/reference/hooks/use-region-selector.mdx
---

title: useRegionSelector
description: Créez un sélecteur de région personnalisé avec General Translation gt-react. Référence API de useRegionSelector.

---

Le hook `useRegionSelector` renvoie les données et les gestionnaires nécessaires pour créer un sélecteur de région personnalisé : la région active, les régions disponibles, les métadonnées de région, ainsi que les fonctions permettant de mettre à jour la région ou le paramètre régional.

*Disponible dans `gt-react` et `gt-react-native`. Les exemples importent depuis `gt-react` ; importez plutôt depuis le package de votre framework.*

*Remarque : n’est pas exporté par `gt-next` ni `gt-tanstack-start`.*

## Vue d’ensemble [#overview]

Appelez `useRegionSelector` et intégrez ses valeurs à votre propre interface.

```tsx
'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]
  });

  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>
  );
}
```

*Remarque : `useRegionSelector` fonctionne uniquement côté client et doit être utilisé au sein d’un [`<GTProvider>`](/docs/react/reference/components/gt-provider). Si vous n’avez pas besoin d’une interface utilisateur personnalisée, utilisez plutôt le composant [`<RegionSelector>`](/docs/react/reference/components/region-selector).*

## Fonctionnement [#how-it-works]

Le hook renvoie la région active, la liste ordonnée des régions, une table de correspondance `regionData` des métadonnées d’affichage, ainsi que des fonctions de mise à jour pour la région et le paramètre régional. Lorsque `regions` n’est pas fourni, les régions disponibles sont déduites des locales prises en charge.

## Paramètres [#parameters]

`useRegionSelector` accepte un objet de configuration facultatif.

| Paramètre                                      | Description                                                                | Type       | Facultatif | Par défaut |
| ---------------------------------------------- | -------------------------------------------------------------------------- | ---------- | ---------- | ---------- |
| [`regions`](#regions)                          | Sous-ensemble des codes de région ISO 3166 à afficher.                     | `string[]` | Oui        | Déduite    |
| [`customMapping`](#custom-mapping)             | Noms d’affichage, émojis ou paramètres régionaux personnalisés par région. | `object`   | Oui        | —          |
| [`prioritizeCurrentLocaleRegion`](#prioritize) | Place en premier la région du paramètre régional actuel.                   | `boolean`  | Oui        | `true`     |
| [`sortRegionsAlphabetically`](#sort)           | Trie les régions par ordre alphabétique selon leur nom d’affichage.        | `boolean`  | Oui        | `true`     |

### `regions` [#regions]

**Type** `string[]` · **Facultatif** · **Par défaut** Déduit

Codes de région ISO 3166 à afficher. Si ce champ est omis, les régions sont déterminées à partir des locales prises en charge.

### `customMapping` [#custom-mapping]

**Type** `object` · **Facultatif**

Une table de correspondance entre des codes de région et des données d’affichage personnalisées. Chaque valeur peut être une chaîne de caractères (nom d’affichage) ou un objet avec les propriétés `name`, `emoji` et/ou `locale`.

### `prioritizeCurrentLocaleRegion` [#prioritize]

**Type** `boolean` · **Facultatif** · **Par défaut** `true`

Lorsque `true`, la région correspondant au paramètre régional actuel est affichée en priorité dans la liste.

### `sortRegionsAlphabetically` [#sort]

**Type** `boolean` · **Facultatif** · **Par défaut** `true`

Lorsque la valeur est `true`, les régions sont triées par ordre alphabétique de leur nom d’affichage.

## Valeur de retour [#returns]

**Type** `object`

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

## Remarques [#notes]

* `useRegionSelector` est disponible uniquement côté client.
* Pour un menu déroulant prêt à l’emploi, utilisez [`<RegionSelector>`](/docs/react/reference/components/region-selector).
* Pour l’équivalent du paramètre régional, consultez [`useLocaleSelector`](/docs/react/reference/hooks/use-locale-selector).