> ## 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 renvoie une fonction permettant de changer la langue d’affichage sur l’écran ACUL actuel. L’écran est automatiquement rendu de nouveau avec la nouvelle langue après l’envoi. La langue doit faire partie des langues activées configurées dans votre locataire Auth0.

  ### Principales fonctionnalités

  * **Compatible avec le locataire** — accepte uniquement les langues activées dans la configuration de votre locataire Auth0.
  * **Nouveau rendu automatique** — l’écran se met à jour dans la nouvelle langue une fois le changement envoyé.
  * **Persistance de session** — la préférence de langue est stockée pendant toute la durée de la session par défaut.

  ## Paramètres

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

  <ParamField body="language" type="string" required>
    Le code de langue vers lequel basculer. Il doit correspondre à l’une des langues activées dans votre locataire 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 envoie le changement de langue. La promesse renvoyée est résolue une fois l’envoi terminé.

  ```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 locataire :

  ```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 langue activée dans votre locataire Auth0 — transmettre une langue non prise en charge entraînera une erreur.
  * Utilisez `useCurrentScreen()` pour accéder à `tenant.enabledLocales` et `transaction.locale` afin de sélectionner dynamiquement la langue.
  * Appelez `useChangeLanguage` au niveau supérieur de votre composant; ne l’appelez pas conditionnellement ni à l’intérieur des gestionnaires d’événements.
</ParamField>