useChangeLanguage

useChangeLanguage · (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 :

language · 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".

persist · "session"

Portée de persistance de la préférence de langue. La valeur par défaut est "session".

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.

Example

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 :

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.