BlogTableau de bord

Changer de langue

Comment configurer et passer d’une langue à l’autre dans votre application React

Le changement de langue permet aux utilisateurs de définir leur locale préférée pour le contenu de votre application. GT React propose plusieurs approches, allant d’un simple changement par programmation à des composants d’interface prêts à l’emploi pour créer des sélecteurs de langue personnalisés.

Méthodes disponibles

  • Programmatiques : hook useSetLocale pour des contrôles personnalisés
  • Interface prête à l’emploi : composant <LocaleSelector> avec menu déroulant
  • Interface personnalisée : hook useLocaleSelector pour créer des sélecteurs personnalisés

Utiliser le hook useSetLocale

Le hook useSetLocale permet de changer la langue de votre application :

import { useSetLocale } from 'gt-react';

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

  return <button onClick={() => setLocale('en')}>Définir la locale</button>;
}

Indiquez simplement le locale vers lequel vous souhaitez basculer en argument de la fonction renvoyée par le hook.

Utilisation du composant <LocaleSelector>

Le composant <LocaleSelector> propose un menu déroulant prêt à l’emploi qui affiche automatiquement toutes les locales configurées :

import { LocaleSelector } from 'gt-react';

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

Ce composant effectue automatiquement :

  • Affiche toutes les locales configurées pour votre projet
  • Affiche les locales sous leur nom dans leur langue d’origine
  • Gère la logique de changement
  • Conserve l’état de la sélection actuelle

Utilisation du hook useLocaleSelector

Si vous souhaitez créer votre propre composant de sélection de langue, utilisez useLocaleSelector :

import { useLocaleSelector } from 'gt-react';

function CustomLocaleSelector() {
  const { 
    locale,              // Locale active actuelle (p. ex. 'en', 'es')
    locales,             // Tableau des locales prises en charge par votre projet ['en', 'es', 'fr']
    setLocale,           // Fonction pour changer la locale : setLocale('es')
    getLocaleProperties  // Fonction pour obtenir les informations d'affichage d'une locale
  } = 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} {/* p. ex. "English (US)", "Español (ES)" */}
          </option>
        );
      })}
    </select>
  );
}

Remarques importantes

Condition requise pour GTProvider

Les composants de changement de langue doivent être utilisés à l’intérieur d’un <GTProvider> :

// ✅ Correct
<GTProvider>
  <LanguageSwitcher />
</GTProvider>

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

Prochaines étapes

Comment trouvez-vous ce guide ?

Dictionaries

Comment utiliser des modèles de traduction traditionnels basés sur un dictionary

Stockage local des traductions

Stockez les traductions dans le bundle de votre application plutôt que d'utiliser un CDN (réseau de diffusion de contenu)

Sur cette page

Méthodes disponibles
Utiliser le hook useSetLocale
Utilisation du composant <LocaleSelector>
Utilisation du hook useLocaleSelector
Remarques importantes
Condition requise pour GTProvider
Prochaines étapes