> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# useChangeLanguage

<ParamField body="useChangeLanguage" type="(options: LanguageChangeOptions) => Promise<void>">
  Hook React qui retourne une fonction permettant de changer la langue d’affichage à l’écran ACUL actuel. L’écran se réaffiche automatiquement dans la nouvelle locale après la soumission. La langue doit correspondre à l’une des locales activées dans votre tenant Auth0.

  ### Fonctionnalités clés

  * **Compatible avec le tenant** — accepte uniquement les locales activées dans la configuration de votre tenant Auth0.
  * **Réaffichage automatique** — l’écran se met à jour dans la nouvelle langue une fois le changement soumis.
  * **Persistance de la session** — la préférence de langue est enregistrée pour la durée de la session par défaut.

  ## Paramètres

  La fonction retournée accepte un seul argument [`LanguageChangeOptions`](/docs/fr-ca/libraries/acul/react-sdk/API-Reference/Types/interfaces/LanguageChangeOptions) :

  <ParamField body="language" type="string" required>
    Le code de locale vers lequel basculer. Il doit correspondre à l’une des locales activées dans votre tenant Auth0. Exemple : `"en"`, `"fr"`, `"es"`.
  </ParamField>

  <ParamField body="persist" type="&#x22;session&#x22;">
    Portée de persistance de la préférence de langue. La valeur par défaut est `"session"`.
  </ParamField>

  ## Valeur de retour

  `(options: LanguageChangeOptions) => Promise<void>`

  Une fonction qui soumet le changement de langue. La promesse retournée est résolue une fois la soumission terminée.

  ```tsx Example theme={null}
  import { useChangeLanguage } from "@auth0/auth0-acul-react";

  export function LanguageSwitcher() {
    const changeLanguage = useChangeLanguage();

    return (
      <div>
        <button onClick={() => changeLanguage({ language: "en" })}>English</button>
        <button onClick={() => changeLanguage({ language: "fr" })}>Français</button>
        <button onClick={() => changeLanguage({ language: "es" })}>Español</button>
      </div>
    );
  }
  ```

  Vous pouvez aussi renseigner les options dynamiquement à partir de la configuration du tenant :

  ```tsx theme={null}
  import { useChangeLanguage, useCurrentScreen } from "@auth0/auth0-acul-react";

  export function LocaleSelector() {
    const changeLanguage = useChangeLanguage();
    const { tenant, transaction } = useCurrentScreen();

    return (
      <select
        defaultValue={transaction.locale}
        onChange={e => changeLanguage({ language: e.target.value })}
      >
        {tenant.enabledLocales.map(locale => (
          <option key={locale} value={locale}>{locale}</option>
        ))}
      </select>
    );
  }
  ```

  ## Remarques

  * La valeur `language` doit correspondre à une locale activée dans votre tenant Auth0 — transmettre une locale non prise en charge entraînera une erreur.
  * Utilisez `useCurrentScreen()` pour accéder à `tenant.enabledLocales` et `transaction.locale` afin de sélectionner dynamiquement la locale.
  * Appelez `useChangeLanguage` au niveau supérieur de votre composant; ne l’appelez pas de manière conditionnelle ni dans des gestionnaires d’événements.
</ParamField>