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

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas ce fichier 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/next/api/helpers/use-set-locale), ainsi qu’une fonction permettant de récupérer les propriétés d’un 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/next/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/next/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/next/api/components/locale-selector).

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

  // Récupérer 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

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