# gt-next: General Translation Next.js SDK: useRegionSelector
URL: https://generaltranslation.com/fr/docs/next/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 fonctions de gestion nécessaires pour implémenter un composant UI personnalisé de sélecteur de région. Il renvoie la région actuelle, une liste des régions disponibles, les métadonnées associées à 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 par un [`<GTProvider>`](/docs/next/api/components/gtprovider).
</Callout>

## Référence

### Paramètres

Objet de configuration facultatif :

| Paramètre                       | Type       | Par défaut | Description                                                                                                                                                                                                                                                                            |
| ------------------------------- | ---------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `regions`                       | `string[]` | —          | Tableau facultatif de codes de région ISO 3166 à afficher. S&#39;il n&#39;est pas fourni, les régions sont déduites des paramètres régionaux pris en charge.                                                                                                                           |
| `customMapping`                 | `object`   | —          | Correspondance facultative permettant de remplacer les noms d&#39;affichage des régions, les emojis ou les paramètres régionaux associés. Les valeurs peuvent être une chaîne de caractères (nom d&#39;affichage) ou un objet contenant 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 prioritaire 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&#39;affichage.                                                                                                                                                                               |

### Retourne

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-next';

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

## Étapes suivantes

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