useChangeLanguage

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

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

主な機能

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

パラメーター

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

language · string · required

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

persist · "session"

言語設定の永続化スコープです。デフォルト値は "session" です。

戻り値

(options: LanguageChangeOptions) => Promise<void>

言語変更を送信する関数です。返される Promise は、送信の完了時に resolve されます。

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

options は、テナント設定から動的に設定することもできます。

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 はコンポーネントのトップレベルで呼び出してください。条件分岐の中やイベントハンドラー内で呼び出してはいけません。