useChangeLanguage

useChangeLanguage · (options: LanguageChangeOptions) => Promise<void>

Hook de React que devuelve una función para cambiar el idioma de visualización en la pantalla actual de ACUL. La pantalla se vuelve a renderizar automáticamente con la nueva configuración regional después del envío. El idioma debe ser una de las configuraciones regionales habilitadas en tu inquilino de Auth0.

Características clave

• Reconoce el inquilino — solo acepta configuraciones regionales habilitadas en la configuración de tu inquilino de Auth0.
• Nueva renderización automática — la pantalla se actualiza al nuevo idioma después de enviar el cambio.
• Persistencia de sesión — la preferencia de idioma se almacena durante la sesión de forma predeterminada.

Parámetros

La función devuelta acepta un único argumento LanguageChangeOptions:

language · string · required

El código de configuración regional al que quieres cambiar. Debe coincidir con una de las configuraciones regionales habilitadas en tu inquilino de Auth0. Ejemplo: "en", "fr", "es".

persist · "session"

Scope de persistencia de la preferencia de idioma. El valor predeterminado es "session".

Devuelve

(options: LanguageChangeOptions) => Promise<void>

Una función que envía el cambio de idioma. La promesa devuelta se resuelve cuando se completa el envío.

Ejemplo

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>
  );
}

También puedes completar las opciones dinámicamente a partir de la configuración del inquilino:

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>
  );
}

Observaciones

• El valor de language debe coincidir con una configuración regional habilitada en tu inquilino de Auth0; pasar una configuración regional no compatible producirá un error.
• Usa useCurrentScreen() para acceder a tenant.enabledLocales y transaction.locale para la selección dinámica de configuraciones regionales.
• Llama a useChangeLanguage en el nivel superior de tu componente; no lo llames de forma condicional ni dentro de controladores de eventos.