Changer de langue

Aperçu

Dans ce guide, nous allons vous montrer comment changer la langue de votre application React.

Si vous n'avez pas encore configuré votre application avec gt-react, veuillez consulter le guide de démarrage rapide avant de continuer.

Il existe trois façons de changer la langue de votre application en utilisant gt-react.

En utilisant le hook useSetLocale()
En utilisant le composant <LocaleSelector>
En utilisant le hook useLocaleSelector()

Nous aborderons ces trois méthodes dans ce guide.

Utilisation du hook `useSetLocale`

Le hook useSetLocale est un hook côté client qui vous permet de changer la langue de votre application. Il doit être utilisé à l'intérieur d'un composant GTProvider.

import { useSetLocale } from 'gt-react';
export default function MyComponent() {
  const setLocale = useSetLocale();

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

Il vous suffit de fournir la locale vers laquelle vous souhaitez changer en tant qu'argument à la fonction de rappel retournée par le hook useSetLocale.

Utilisation du composant `<LocaleSelector>`

Le composant <LocaleSelector> est un composant côté client qui vous permet de changer la langue de votre application. Il doit être utilisé à l'intérieur d'un composant GTProvider.

Il s'agit d'un menu déroulant minimaliste qui affiche toutes les locales que vous avez activées dans votre projet, et permet aux utilisateurs de sélectionner une autre locale.

import { LocaleSelector } from 'gt-react';

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

Utilisation du hook `useLocaleSelector`

Alternativement, si vous souhaitez créer votre propre composant de sélection de langue, vous pouvez utiliser le hook useLocaleSelector.

Ce hook retourne la langue actuelle, la liste des langues prises en charge par votre projet, ainsi que le hook useSetLocale.

Voici un exemple d'utilisation du hook useLocaleSelector pour créer un composant personnalisé de sélection de langue.

import { useLocaleSelector } from 'gt-react';
import { getLocaleProperties } from 'generaltranslation';

function capitalizeLanguageName(language: string): string {
  if (!language) return '';
  return (
    language.charAt(0).toUpperCase() +
    (language.length > 1 ? language.slice(1) : '')
  );
}

export default function LocaleDropdown({ className }: { className?: string }) {
  // Retrieve the locale, locales, and setLocale function
  const { locale, locales, setLocale } = useLocaleSelector();

  // Helper function to get the display name of a locale
  const getDisplayName = (locale: string) => {
    return capitalizeLanguageName(
      getLocaleProperties(locale).nativeNameWithRegionCode
    );
  };

  // If no locales are returned, just render nothing or handle gracefully
  if (!locales || locales.length === 0 || !setLocale) {
    return null;
  }

  return (
    <Select onValueChange={setLocale} defaultValue={locale}>
      <SelectTrigger>
        <SelectValue placeholder='Select language' />
      </SelectTrigger>
      <SelectContent className='z-[200!important]' position='popper'>
        <SelectGroup>
          {!locale && <SelectItem value='' />}

          {locales.map((locale) => (
            <SelectItem key={locale} value={locale} suppressHydrationWarning>
              {getDisplayName(locale)}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

Consultez la référence API pour plus d'informations.

Prochaines étapes

En savoir plus sur le hook useSetLocale.
En savoir plus sur le composant <LocaleSelector>.
En savoir plus sur le hook useLocaleSelector.

Changer de langue

Aperçu

Utilisation du hook useSetLocale

Utilisation du composant <LocaleSelector>

Utilisation du hook useLocaleSelector

Prochaines étapes

Sur cette page

Utilisation du hook `useSetLocale`

Utilisation du composant `<LocaleSelector>`

Utilisation du hook `useLocaleSelector`