useChangeLanguage

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

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

主な機能

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

パラメーター

返される関数は、LanguageChangeOptions 型の引数を 1 つ受け取ります。

language · string · required

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

persist · "session"

言語設定の永続化の範囲です。デフォルトは "session" です。

戻り値

(options: LanguageChangeOptions) => Promise<void>

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

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

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

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 はコンポーネントのトップレベルで呼び出してください。条件付きで呼び出したり、イベントハンドラー内で呼び出したりしないでください。