> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# useCurrentScreen

<ParamField body="useCurrentScreen()" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/CurrentScreenOptions">CurrentScreenOptions</a></span>}>
  現在の画面コンテキストおよび状態を取得する React フックです。

  このフックを使用すると、クライアント設定、組織の詳細、画面の識別情報、
  テナント設定、トランザクションの状態、カスタム認証 UI を構築するための認可パラメータにアクセスできます。

  ## Return Value

  次のプロパティを持つ `CurrentScreenOptions` オブジェクト、または利用できない場合は `null` を返します。

  * **`client`** - アプリケーションの識別子とメタデータ
  * **`organization`** - 組織 ID とメタデータ（Auth0 Organizations 用）
  * **`prompt`** - 現在のプロンプト名（例: "login", "consent", "mfa"）
  * **`screen`** - 現在の画面名（例: "login-id", "login-password", "mfa-otp-challenge"）
  * **`tenant`** - 有効なロケールを含むテナント設定
  * **`transaction`** - トランザクションの状態、エラー配列、および現在のロケール
  * **`untrustedData`** - クライアントからの認可パラメータ（使用前に検証してください）

  ## Key Points

  * 認証画面を条件付きでレンダリングするには `screen.name` を使用します
  * ネストされたプロパティは `null` になり得るため、常にオプショナルチェイニング（`?.`）を使用します
  * バリデーションエラーを表示するには `transaction.errors` を確認します
  * 組織固有のブランディングには `organization.metadata` にアクセスします

  ## Returns

  [`CurrentScreenOptions`](/docs/ja-JP/libraries/acul/react-sdk/API-Reference/Types/interfaces/CurrentScreenOptions) | `null`

  現在の画面コンテキストのデータ、または利用できない場合は `null` です。

  ```tsx Basic screen routing theme={null}
  import { useCurrentScreen } from '@auth0/auth0-acul-react';

  const AuthFlow = () => {
    const screenOptions = useCurrentScreen();
    const screen = screenOptions?.screen?.name || "login-id";

    switch (screen) {
      case "login-id":
        return <LoginIdScreen />;
      case "login-password":
        return <LoginPasswordScreen />;
      case "mfa-otp-challenge":
        return <MfaOtpChallengeScreen />;
      default:
        return null;
    }
  };
  ```

  ```tsx Accessing multiple properties theme={null}
  import { useCurrentScreen } from '@auth0/auth0-acul-react';

  const CustomAuthScreen = () => {
    const screenOptions = useCurrentScreen();
    const organizationId = screenOptions?.organization?.id;
    const errors = screenOptions?.transaction?.errors || [];
    const locale = screenOptions?.transaction?.locale || 'en';

    return (
      <div>
        {organizationId && <p>Organization: {organizationId}</p>}
        {errors.map((error, i) => (
          <p key={i} className="error">{error.message}</p>
        ))}
        <p>Language: {locale}</p>
      </div>
    );
  };
  ```
</ParamField>