> ## 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 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`](/es/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/LanguageChangeOptions):

  <ParamField body="language" type="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"`.
  </ParamField>

  <ParamField body="persist" type="&#x22;session&#x22;">
    Scope de persistencia de la preferencia de idioma. El valor predeterminado es `"session"`.
  </ParamField>

  ## 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.

  ```tsx Ejemplo 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>
    );
  }
  ```

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

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

  ## 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.
</ParamField>