> ## 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>">
  現在の ACUL 画面の表示言語を変更する関数を返す React フックです。送信後、画面は新しいロケールで自動的に再レンダリングされます。言語には、Auth0 テナントで有効になっているロケールのいずれかを指定する必要があります。

  ### 主な機能

  * **テナント対応** — Auth0 テナントの設定で有効になっているロケールのみ受け付けます。
  * **自動再レンダリング** — 変更を送信すると、画面が新しい言語に更新されます。
  * **セッションの永続化** — 言語設定はデフォルトでセッション中保持されます。

  ## パラメーター

  返される関数は、[`LanguageChangeOptions`](/docs/ja-jp/libraries/acul/react-sdk/API-Reference/Types/interfaces/LanguageChangeOptions) 型の引数を 1 つ受け取ります。

  <ParamField body="language" type="string" required>
    切り替え先のロケールコードです。Auth0 テナントで有効になっているロケールのいずれかと一致する必要があります。例: `"en"`、`"fr"`、`"es"`。
  </ParamField>

  <ParamField body="persist" type="&#x22;session&#x22;">
    言語設定の永続化の範囲です。デフォルトは `"session"` です。
  </ParamField>

  ## 戻り値

  `(options: LanguageChangeOptions) => Promise<void>`

  言語変更を送信する関数です。返される Promise は、送信が完了すると解決されます。

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

  テナント設定に基づいて、オプションを動的に設定することもできます。

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

  ## 備考

  * `language` の値は、Auth0 テナントで有効になっているロケールと一致する必要があります。サポートされていないロケールを渡すとエラーになります。
  * ロケールを動的に選択するには、`useCurrentScreen()` を使用して `tenant.enabledLocales` と `transaction.locale` にアクセスしてください。
  * `useChangeLanguage` はコンポーネントのトップレベルで呼び出してください。条件付きで呼び出したり、イベントハンドラー内で呼び出したりしないでください。
</ParamField>