# gt-react: General Translation React SDK: Changer de langue
URL: https://generaltranslation.com/fr/docs/react/guides/languages.mdx
---
title: Changer de langue
description: Comment configurer et changer de langue dans votre application React
---

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

Le changement de langue permet aux utilisateurs de modifier le paramètre régional préféré du contenu de votre application. GT React propose plusieurs approches, allant d’un changement programmatique simple à des composants d’interface prêts à l’emploi pour créer des sélecteurs de langue personnalisés.


## Méthodes disponibles

* **Par programmation** : hook [`useSetLocale`](/docs/react/api/helpers/use-set-locale) pour des contrôles personnalisés
* **UI prédéfinie** : composant [`<LocaleSelector>`](/docs/react/api/components/locale-selector) avec liste déroulante
* **UI personnalisée** : hook [`useLocaleSelector`](/docs/react/api/helpers/use-locale-selector) pour créer des sélecteurs personnalisés

## Utilisation du hook `useSetLocale`

Le hook [`useSetLocale`](/docs/react/api/helpers/use-set-locale) vous permet de changer la langue de votre application :

```tsx
import { useSetLocale } from 'gt-react';

export default function MyComponent() {
  const setLocale = useSetLocale();

  return <button onClick={() => setLocale('en')}>Set Locale</button>;
}
```

Fournissez simplement le paramètre régional vers lequel vous souhaitez passer en argument à la fonction renvoyée par le hook.


## Utiliser le composant `<LocaleSelector>`

Le composant [`<LocaleSelector>`](/docs/react/api/components/locale-selector) fournit une liste déroulante prête à l’emploi qui affiche automatiquement tous les paramètres régionaux configurés :

```tsx
import { LocaleSelector } from 'gt-react';

export default function MyComponent() {
  return <LocaleSelector />;
}
```

Ce composant :

* Affiche tous les paramètres régionaux configurés pour votre projet
* Affiche les paramètres régionaux dans le nom natif de chaque langue
* Gère la logique de changement de paramètre régional
* Conserve l’état de la sélection actuelle


## Utiliser le hook `useLocaleSelector`

Si vous souhaitez créer votre propre composant de sélection du paramètre régional, utilisez [`useLocaleSelector`](/docs/react/api/helpers/use-locale-selector) :

```tsx
import { useLocaleSelector } from 'gt-react';

function CustomLocaleSelector() {
  const { 
    locale,              // Paramètre régional actif (ex. : 'en', 'es')
    locales,             // Tableau des paramètres régionaux pris en charge par votre projet ['en', 'es', 'fr']
    setLocale,           // Fonction pour changer le paramètre régional : setLocale('es')
    getLocaleProperties  // Fonction pour obtenir les informations d'affichage d'un paramètre régional
  } = useLocaleSelector();
  
  if (!locales?.length) return null;
  
  return (
    <select 
      value={locale || ''} 
      onChange={(e) => setLocale(e.target.value)}
    >
      {locales.map((loc) => {
        const props = getLocaleProperties(loc);
        return (
          <option key={loc} value={loc}>
            {props.nativeNameWithRegionCode} {/* e.g., "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}
```


## Remarques importantes

### GTProvider requis

Les composants de changement de langue doivent être utilisés dans un [`<GTProvider>`](/docs/react/api/components/gtprovider) :

```tsx
// ✅ Correct
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

// ❌ Incorrect - en dehors du provider
<LanguageSwitcher />
```


## Étapes suivantes

* [Guide du contenu dynamique](/docs/key-concepts/dynamic-content) - Traduction du contenu en exécution
* Références de l’API :
  * [Hook `useSetLocale`](/docs/react/api/helpers/use-set-locale)
  * [Composant `<LocaleSelector>`](/docs/react/api/components/locale-selector)
  * [Hook `useLocaleSelector`](/docs/react/api/helpers/use-locale-selector)