useChangeLanguage

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

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

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 envoie le changement de langue. La promesse renvoyée est résolue une fois l’envoi terminé.

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

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.