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

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


## Vue d’ensemble

Ce hook renvoie le paramètre régional actuel, la liste des paramètres régionaux, le hook [`useSetLocale`](/docs/react/api/helpers/use-set-locale), ainsi qu’une fonction pour récupérer les propriétés du paramètre régional.
Il est conçu pour simplifier la création de votre propre composant de sélecteur de paramètre régional.

Si vous ne souhaitez pas implémenter le vôtre, vous pouvez utiliser le composant [`<LocaleSelector>`](/docs/react/api/components/locale-selector) à la place.

## Référence

### Renvoie

Un objet contenant le paramètre régional actuel, la liste des paramètres régionaux, le hook [`useSetLocale`](/docs/react/api/helpers/use-set-locale) et une fonction permettant d’obtenir les propriétés du paramètre régional.

***

## Exemples

### `<LocaleSelector>`

Voici un exemple d’implémentation du composant [`<LocaleSelector>`](/docs/react/api/components/locale-selector).

```jsx
export default function LocaleSelector({
  locales: _locales,
  ...props
}: {
  locales?: string[];
  [key: string]: any;
}): React.JSX.Element | null {
  // Récupère les propriétés du sélecteur de paramètre régional
  const { locale, locales, setLocale, getLocaleProperties } = useLocaleSelector(
    _locales ? _locales : undefined
  );

  // Récupère le nom d'affichage
  const getDisplayName = (locale: string) => {
    return capitalizeLanguageName(
      getLocaleProperties(locale).nativeNameWithRegionCode
    );
  };

  // Si aucun paramètre régional n'est retourné, ne rien afficher ou gérer proprement
  if (!locales || locales.length === 0 || !setLocale) {
    return null;
  }

  return (
    <select
      {...props}
      // Repli sur une chaîne vide si currentLocale est indéfini
      value={locale || ''}
      onChange={(e) => setLocale(e.target.value)}
    >
      {/* Repli optionnel lorsqu'aucun paramètre régional n'est défini */}
      {!locale && <option value='' />}

      {locales.map((locale) => (
        <option key={locale} value={locale} suppressHydrationWarning>
          {getDisplayName(locale)}
        </option>
      ))}
    </select>
  );
}
```

***


## Remarques

* Ce hook fonctionne uniquement côté client.
* Pour en savoir plus sur les codes de langue, cliquez [ici](/docs/core/locales).

## Étapes suivantes

* Pour en savoir plus sur le composant [`<LocaleSelector>`](/docs/react/api/components/locale-selector).
* Pour en savoir plus sur le hook [`useLocale`](/docs/react/api/helpers/use-locale).