Tableau de bord

Changement 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 basculement programmatique à des composants d’interface prêts à l’emploi pour créer des sélecteurs de langue personnalisés.

Méthodes disponibles

  • Programmatiquement : 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 sur mesure

Utiliser le hook useSetLocale

Le hook useSetLocale vous 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 langue</button>;
}

Indiquez simplement la locale à utiliser 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 fait automatiquement :

  • Affiche toutes les locales configurées pour votre projet
  • Affiche les locales avec leur nom de langue natif
  • Gère la logique de bascule
  • Conserve l’état de sélection en cours

Utiliser le hook useLocaleSelector

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

import { useLocaleSelector } from 'gt-react';

function CustomLocaleSelector() {
  const { 
    locale,              // Locale actuellement active (p. ex., 'en', 'es')
    locales,             // Tableau des locales supportées 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

Que pensez-vous de ce guide ?

Dictionnaires

Utiliser des modèles de traduction traditionnels basés sur des dictionnaires

Stockage local des traductions

Stockez les traductions dans le bundle de votre application plutôt que d'utiliser un CDN

Sur cette page

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