> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-automated-sdk-version-update.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Web で Organization のメンバーを管理する

> 2 つのタブで構成されたレイアウトで、個々の organization メンバーのプロフィールと割り当てられたロールを確認・管理し、ライフサイクル全体を制御できます。

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "Beta",
    "ea": "早期アクセス"
  };
  const stageText = stageTextMap[stage] || "製品リリース段階";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>この機能は{linkify(`${plans}プラン`, "https://auth0.com/pricing")}でご利用いただけます。 </>}
            {contact && "参加をご希望の場合は、" + contact + "までお問い合わせください。 "}
            {terms && <>この機能を使用することにより、Oktaの該当する無料トライアル規約および{linkify("Master Subscription Agreement", "https://www.okta.com/legal")}に同意したものとみなされます。</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>{feature}機能は現在、{linkify(stageText, prsLink)}です。</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const ComponentLoader = props => {
  const detectTheme = () => {
    if (typeof document === "undefined") return "light";
    const html = document.documentElement;
    const colorScheme = html.style.colorScheme || window.getComputedStyle(html).colorScheme;
    if (colorScheme) return colorScheme === "dark" ? "dark" : "light";
    const isDarkMode = window?.localStorage?.getItem?.("isDarkMode");
    const prefersDark = window.matchMedia?.("(prefers-color-scheme: dark)").matches;
    const shouldBeDark = isDarkMode === "dark" || isDarkMode !== "light" && prefersDark;
    return shouldBeDark ? "dark" : "light";
  };
  const [theme, setTheme] = useState(detectTheme);
  useEffect(() => {
    if (typeof document === "undefined") return;
    setTheme(detectTheme());
    const observer = new MutationObserver(() => setTheme(detectTheme()));
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["style", "class", "data-theme", "data-theme-preference"]
    });
    return () => observer.disconnect();
  }, []);
  const lang = {
    i18n: {
      currentLanguage: props.lang || "en-US"
    }
  };
  return <div style={{
    minHeight: "400px",
    marginTop: "40px",
    background: theme === "light" ? "rgb(var(--gray-950)/.03)" : "rgb(255 255 255/.1)",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    backgroundSize: "16px 16px",
    borderRadius: "10px",
    boxShadow: "0 1px 4px 0 rgba(16,30,54,0.04)",
    display: "flex",
    flexDirection: "column"
  }}>
      <div style={{
    minWidth: "320px",
    width: "96.5%",
    maxWidth: "1200px",
    margin: "12px 12px 0",
    background: theme === "light" ? "#ffffff" : "#101011",
    borderRadius: "10px",
    boxShadow: "0 2px 8px 0 rgba(16,30,54,0.04)",
    padding: "24px",
    minHeight: "400px"
  }} data-uc-component={props.componentSelector} data-uc-props={JSON.stringify(lang)}>
        <div aria-label="読み込み中" role="status" style={{
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    zIndex: 1,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }}>
          <svg width={40} height={40} viewBox="0 0 50 50" style={{
    display: "block"
  }}>
            <circle cx="25" cy="25" r="20" fill="none" stroke="#8A94A6" strokeWidth="5" strokeDasharray="90 150" strokeLinecap="round">
              <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
            </circle>
          </svg>
        </div>
      </div>
      <div style={{
    width: "100%",
    textAlign: "center",
    color: theme === "light" ? "#6B7280" : "#ffffff",
    fontSize: "12px",
    marginTop: "8px",
    marginBottom: "8px",
    letterSpacing: "0.01em",
    fontWeight: 400
  }}>
        {props.componentPreviewText}
      </div>
    </div>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

`OrganizationMemberDetail` コンポーネントは、個々の [organization](/docs/ja-jp/manage-users/organizations) メンバーのプロフィールと割り当て済みロールを表示・管理するための統合インターフェースを提供します。

<ComponentLoader componentSelector="organization-member-detail" componentPreviewText="Preview of the Organization Member Detail component" />

<Tabs>
  <Tab title="React">
    <h2 id="setup-requirements">
      セットアップ要件
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0の設定が必要です**—テナントでMy Organization APIが設定されていることを確認してください。[セットアップガイドを見る →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation">
      インストール
    </h2>

    ```bash pnpm wrap lines theme={null}
    pnpm add @auth0/universal-components-react
    ```

    <h2 id="get-started">
      はじめに
    </h2>

    ルートからコンポーネントに `userId` を渡します。戻るボタンでメンバー一覧に戻るように、`onBack` をルーターに接続してください。

    ```tsx wrap lines theme={null}
    import { OrganizationMemberDetail } from "@auth0/universal-components-react";
    import { useNavigate, useParams } from "react-router-dom";

    export function MemberDetailPage() {
      const { userId } = useParams<{ userId: string }>();
      const navigate = useNavigate();

      return (
        <OrganizationMemberDetail
          userId={userId!}
          onBack={() => navigate("/members")}
        />
      );
    }
    ```

    <Accordion title="統合の完全な例">
      ```tsx lines theme={null}
      import React from "react";
      import { OrganizationMemberDetail } from "@auth0/universal-components-react";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate, useParams, useSearchParams } from "react-router-dom";
      import { auditLog } from "./lib/audit-log";

      function MemberDetailPage() {
        const { userId } = useParams<{ userId: string }>();
        const [searchParams] = useSearchParams();
        const navigate = useNavigate();
        const initialTab = searchParams.get("tab") === "roles" ? "roles" : "details";

        return (
          <div className="max-w-3xl mx-auto p-6">
            <OrganizationMemberDetail
              userId={userId!}
              initialTab={initialTab}
              onBack={() => navigate("/members")}
              removeFromOrganizationAction={{
                onBefore: (removedUserId) =>
                  window.confirm(`Remove member ${removedUserId} from the organization?`),
                onAfter: (removedUserId) => {
                  auditLog.record({ action: "member_removed", userId: removedUserId });
                },
              }}
              assignRolesAction={{
                onAfter: ({ userId, roleIds }) => {
                  auditLog.record({ action: "roles_assigned", userId, roleIds });
                },
              }}
              removeRolesAction={{
                onAfter: ({ userId, roleIds }) => {
                  auditLog.record({ action: "roles_removed", userId, roleIds });
                },
              }}
              customMessages={{
                member: {
                  detail: {
                    back_button: "Back to Members",
                    roles: { assign_button: "Assign Roles" },
                  },
                },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#4f46e5" },
                  dark: { "--color-primary": "#818cf8" },
                },
                classes: {
                  "OrganizationMemberDetail-root": "max-w-3xl mx-auto",
                },
              }}
            />
          </div>
        );
      }

      export default function App() {
        const domain = "YOUR_TENANT.auth0.com";
        const clientId = "YOUR_CLIENT_ID";

        return (
          <Auth0Provider
            domain={domain}
            clientId={clientId}
            authorizationParams={{ redirect_uri: window.location.origin }}
          >
            <Auth0ComponentProvider>
              <MemberDetailPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }
      ```
    </Accordion>
  </Tab>

  <Tab title="Next.js">
    <h2 id="setup-requirements-2">
      セットアップ要件
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0の設定が必要です**—テナントでMy Organization APIが設定されていることを確認してください。[セットアップガイドを見る →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation-2">
      インストール
    </h2>

    ```bash pnpm wrap lines theme={null}
    pnpm add @auth0/universal-components-react
    ```

    <h2 id="get-started-2">
      はじめに
    </h2>

    ```tsx wrap lines theme={null}
    // app/members/[userId]/page.tsx
    "use client";

    import { OrganizationMemberDetail } from "@auth0/universal-components-react";
    import { useRouter, useParams } from "next/navigation";

    export default function MemberDetailPage() {
      const { userId } = useParams<{ userId: string }>();
      const router = useRouter();

      return (
        <OrganizationMemberDetail
          userId={userId}
          onBack={() => router.push("/members")}
        />
      );
    }
    ```

    <Accordion title="完全な統合例">
      ```tsx lines theme={null}
      // app/layout.tsx
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";

      export default function RootLayout({ children }: { children: React.ReactNode }) {
        return (
          <html lang="en">
            <body>
              <Auth0ComponentProvider
                mode="proxy"
                domain="YOUR_TENANT.auth0.com"
                proxyConfig={{ baseUrl: "/api/auth" }}
              >
                {children}
              </Auth0ComponentProvider>
            </body>
          </html>
        );
      }
      ```

      ```tsx lines theme={null}
      // app/members/[userId]/page.tsx
      "use client";

      import React from "react";
      import { OrganizationMemberDetail } from "@auth0/universal-components-react";
      import { useRouter, useParams, useSearchParams } from "next/navigation";
      import { auditLog } from "@/lib/audit-log";

      export default function MemberDetailPage() {
        const { userId } = useParams<{ userId: string }>();
        const searchParams = useSearchParams();
        const router = useRouter();
        const initialTab = searchParams.get("tab") === "roles" ? "roles" : "details";

        return (
          <div className="max-w-3xl mx-auto p-6">
            <OrganizationMemberDetail
              userId={userId}
              initialTab={initialTab}
              onBack={() => router.push("/members")}
              removeFromOrganizationAction={{
                onBefore: (memberId) =>
                  window.confirm(`Remove member ${memberId} from the organization?`),
                onAfter: (memberId) => {
                  auditLog.record({ action: "member_removed", userId: memberId });
                  router.push("/members");
                },
              }}
              assignRolesAction={{
                onAfter: ({ userId, roleIds }) => {
                  auditLog.record({ action: "roles_assigned", userId, roleIds });
                },
              }}
              removeRolesAction={{
                onAfter: ({ userId, roleIds }) => {
                  auditLog.record({ action: "roles_removed", userId, roleIds });
                },
              }}
              customMessages={{
                member: {
                  detail: {
                    back_button: "Back to Members",
                    roles: { assign_button: "Assign Roles" },
                  },
                },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#4f46e5" },
                  dark: { "--color-primary": "#818cf8" },
                },
              }}
            />
          </div>
        );
      }
      ```
    </Accordion>
  </Tab>

  <Tab title="shadcn">
    <h2 id="setup-requirements-3">
      セットアップ要件
    </h2>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Auth0の設定が必要です**—テナントで My Organization API が設定されていることを確認してください。[セットアップガイドを見る →](/docs/ja-jp/get-started/universal-components/web/components/build-delegated-admin#configure-auth0-dashboard)
    </Callout>

    <h2 id="installation-3">
      インストール
    </h2>

    GitHub Registry を利用して、shadcn CLI でコンポーネントをインストールします。

    ```bash wrap lines theme={null}
    npx shadcn@latest add auth0/auth0-ui-components/react/my-organization/organization-member-detail
    ```

    これにより、React コンポーネントのソースコードが `src/components/auth0/my-organization/` にインストールされ、依存関係と `@auth0/universal-components-core` も併せて追加されます。

    <h2 id="get-started-3">
      はじめに
    </h2>

    ```tsx wrap lines theme={null}
    import { OrganizationMemberDetail } from "@/components/auth0/my-organization/organization-member-detail";
    import { useNavigate, useParams } from "react-router-dom";

    export function MemberDetailPage() {
      const { userId } = useParams<{ userId: string }>();
      const navigate = useNavigate();

      return (
        <OrganizationMemberDetail
          userId={userId!}
          onBack={() => navigate("/members")}
        />
      );
    }
    ```

    <Accordion title="統合の完全な例">
      ```tsx lines theme={null}
      import React from "react";
      import { OrganizationMemberDetail } from "@/components/auth0/my-organization/organization-member-detail";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { useNavigate, useParams, useSearchParams } from "react-router-dom";
      import { auditLog } from "./lib/audit-log";

      function MemberDetailPage() {
        const { userId } = useParams<{ userId: string }>();
        const [searchParams] = useSearchParams();
        const navigate = useNavigate();
        const initialTab = searchParams.get("tab") === "roles" ? "roles" : "details";

        return (
          <div className="max-w-3xl mx-auto p-6">
            <OrganizationMemberDetail
              userId={userId!}
              initialTab={initialTab}
              onBack={() => navigate("/members")}
              removeFromOrganizationAction={{
                onBefore: (removedUserId) =>
                  window.confirm(`Remove member ${removedUserId} from the organization?`),
                onAfter: (removedUserId) => {
                  auditLog.record({ action: "member_removed", userId: removedUserId });
                  navigate("/members");
                },
              }}
              assignRolesAction={{
                onAfter: ({ userId, roleIds }) => {
                  auditLog.record({ action: "roles_assigned", userId, roleIds });
                },
              }}
              removeRolesAction={{
                onAfter: ({ userId, roleIds }) => {
                  auditLog.record({ action: "roles_removed", userId, roleIds });
                },
              }}
              customMessages={{
                member: {
                  detail: {
                    back_button: "Back to Members",
                    roles: { assign_button: "Assign Roles" },
                  },
                },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#4f46e5" },
                  dark: { "--color-primary": "#818cf8" },
                },
              }}
            />
          </div>
        );
      }

      export default function App() {
        const domain = "YOUR_TENANT.auth0.com";
        const clientId = "YOUR_CLIENT_ID";

        return (
          <Auth0Provider
            domain={domain}
            clientId={clientId}
            authorizationParams={{ redirect_uri: window.location.origin }}
          >
            <Auth0ComponentProvider>
              <MemberDetailPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }
      ```
    </Accordion>
  </Tab>
</Tabs>

<h2 id="props">
  プロップ
</h2>

<h3 id="required-props">
  必須プロップ
</h3>

| プロップ | 型 | 説明 |
| :- | :- | :- |
| `userId` | `string` | 表示するメンバーの Auth0 ユーザー ID (例: `auth0\|64abc...`) 。 |

***

<h3 id="display-props">
  表示プロップ
</h3>

表示プロップは、コンポーネントの動作に影響を与えずに、レンダリング方法を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする場合に使用します。

| プロップ | 型 | 説明 |
| :- | :- | :- |
| `hideHeader` | `boolean` | コンポーネントのヘッダーセクション(タイトルと説明)を非表示にします。現在の早期アクセスリリースでは、このプロップを指定しても Member Detail のヘッダーは非表示になりません。デフォルト: `false` |
| `readOnly` | `boolean` | ロール管理とメンバー削除の操作を無効にします。デフォルト: `false` |
| `initialTab` | `'details' \| 'roles'` | 最初に表示するタブです。ルーターのクエリパラメーターを使って、ここにディープリンクできます。デフォルト: `'details'` |

***

<h3 id="action-props">
  アクションプロップ
</h3>

アクションプロップはユーザー操作を処理します。ライフサイクルフック (`onBefore`、`onAfter`) を使って、アプリケーションのルーティングや分析と連携できます。

| プロップ | 型 | 説明 |
| :- | :- | :- |
| `onBack` | `() => void` | 戻るボタンのクリックハンドラー。 |
| `removeFromOrganizationAction` | `ComponentAction<string>` | メンバーを削除するアクション。 |
| `assignRolesAction` | `ComponentAction` | ロールを割り当てます。フックは `{ userId, roleIds }` を受け取ります。 |
| `removeRolesAction` | `ComponentAction` | ロールを削除します。フックは `{ userId, roleIds }` を受け取ります。 |

**onBack**

**型:** `() => void`

ヘッダーの戻るボタンを選択したとき、およびメンバー削除後に自動的に発火します。このコールバックをルーターに接続して、メンバー一覧に戻れるようにします。

```tsx wrap lines theme={null}
<OrganizationMemberDetail userId={userId} onBack={() => navigate("/members")} />
```

**removeFromOrganizationAction**

**型:** `ComponentAction<string>`

Organization からのメンバー削除を制御します (対象はメンバーシップのみで、Auth0 のユーザーストアからユーザープロファイルを削除するわけではありません) 。メンバーシップの削除に成功すると、コンポーネントはアクションのコールバックと `onBack` を呼び出します。`onAfter` が非同期処理を行う場合は、実行順序に依存しないでください。

* `onBefore(userId)` は削除前に確認を行います。キャンセルするには `false` を返します。
* `onAfter(userId)` は削除後に実行されます。

```tsx wrap lines theme={null}
<OrganizationMemberDetail
  userId={userId}
  onBack={() => navigate("/members")}
  removeFromOrganizationAction={{
    onBefore: (memberId) =>
      window.confirm(`Remove member ${memberId} from the organization?`),
    onAfter: (memberId) => {
      auditLog.record({ action: "member_removed", userId: memberId });
    },
  }}
/>
```

**assignRolesAction**

**型:** `ComponentAction<{ userId: string; roleIds: string[] }>`

ロールタブからロールを割り当てた後に発火します。1回の割り当てリクエストで選択できるロールは最大10個、1人のメンバーに割り当てられるロールは合計50個までです。いずれのフックも `{ userId, roleIds }` を受け取ります。

* `onBefore({ userId, roleIds })` は選択内容を検証します。キャンセルするには `false` を返します。
* `onAfter({ userId, roleIds })` は監査ログへの書き込みやロールバッジの更新を行います。

```tsx wrap lines theme={null}
<OrganizationMemberDetail
  userId={userId}
  assignRolesAction={{
    onAfter: ({ userId, roleIds }) => {
      auditLog.record({ action: "roles_assigned", userId, roleIds });
    },
  }}
/>
```

**removeRolesAction**

**型:** `ComponentAction<{ userId: string; roleIds: string[] }>`

ロールテーブルで割り当て済みのロールを削除するときに実行されます (1回の削除リクエストで最大10個のロールに対応) 。どちらのフックも `{ userId, roleIds }` を受け取ります。

* `onBefore({ userId, roleIds })` は、ロールを削除する前に確認を行います。キャンセルするには `false` を返します。
* `onAfter({ userId, roleIds })` は、状態または監査ログを更新します。

```tsx wrap lines theme={null}
<OrganizationMemberDetail
  userId={userId}
  removeRolesAction={{
    onBefore: ({ roleIds }) =>
      window.confirm(`Remove ${roleIds.length} role(s)?`),
    onAfter: ({ userId, roleIds }) => {
      auditLog.record({ action: "roles_removed", userId, roleIds });
    },
  }}
/>
```

***

<h3 id="customization-props">
  カスタマイズ用プロップ
</h3>

| プロップ | 型 | 説明 |
| :- | :- | :- |
| `customMessages` | `Partial<OrganizationMemberDetailMessages>` | 文言とテキストの上書き。 |
| `styling` | `ComponentStyling<OrganizationMemberDetailClasses>` | CSS 変数とクラスの上書き。 |

**customMessages**

コンポーネントに組み込まれているテキストを上書きします。すべてのフィールドは省略可能で、省略した場合は組み込みのデフォルト値が使用されます。

<Accordion title="共通のメッセージグループ">
  **member.detail**—主要なビューとタブ

  * `back_button`, `tabs.details`, `tabs.roles`

  **member.detail.user\_details**—プロフィール表示

  * `title`, `name`, `email`, `phone_number`, `created_at`, `last_login`

  **member.detail.actions.remove\_from\_organization**—削除操作とダイアログ

  * `title`, `description`, `button`
  * `modal.title`, `modal.description`, `modal.cancel_button`, `modal.confirm_button`
  * `success`

  **member.detail.roles**—ロールタブとテーブル

  * `title`, `description`, `assign_button`
  * `roles_selected`, `roles_selected_plural`, `max_selection_message`, `searching_message`
  * `table.name`, `table.description`, `table.empty_message`, `table.remove_button_label`

  **member.detail.roles.assign\_modal**—ロール割り当てモーダル

  * `title`, `description`
  * `roles_label`, `roles_placeholder`
  * `submit_button`, `cancel_button`, `no_roles_available`

  **member.detail.roles.remove\_confirm**—ロール削除の確認ダイアログ

  * `title`, `title_plural`, `description`, `description_plural`
  * `confirm_button`, `cancel_button`

  **member.detail.error**—API エラー

  * `fetch_failed`, `fetch_roles_failed`, `remove_from_organization_failed`, `assign_role_failed`, `remove_role_failed`
</Accordion>

```tsx wrap lines theme={null}
<OrganizationMemberDetail
  userId={userId}
  customMessages={{
    member: {
      detail: {
        back_button: "Back to Members",
        tabs: { details: "Profile", roles: "Permissions" },
        roles: {
          assign_button: "Add Permission",
          table: { empty_message: "No permissions assigned yet." },
        },
        actions: {
          remove_from_organization: {
            title: "Remove from Organization",
            button: "Remove",
            modal: {
              title: "Remove Member",
              confirm_button: "Yes, Remove",
            },
          },
        },
      },
    },
  }}
/>
```

***

**styling**

CSS変数とクラスのオーバーライドで外観をカスタマイズします。変数は`light`、`dark`、`common`のスコープに対応しています。クラスのオーバーライドは、コンポーネントツリー内の名前付きスロットを対象とします。

<Accordion title="利用可能なスタイリングオプション">
  **Variables**—CSSカスタムプロパティ

  * `common`—すべてのテーマに適用
  * `light`—ライトテーマのみ
  * `dark`—ダークテーマのみ

  **Classes**—対象要素のクラスオーバーライド

  * `OrganizationMemberDetail-root`
  * `OrganizationMemberDetail-header`
  * `OrganizationMemberDetail-tabs`
  * `OrganizationMemberDetail-detailsTab`
  * `OrganizationMemberDetail-rolesTab`
  * `MemberRemoveFromOrgModal-dialogContent`
  * `OrganizationMemberRemoveRoleModal-dialogContent`
  * `OrganizationMemberAssignRolesModal-dialogContent`
</Accordion>

```tsx wrap lines theme={null}
<OrganizationMemberDetail
  userId={userId}
  styling={{
    variables: {
      light: { "--color-primary": "#4f46e5" },
      dark: { "--color-primary": "#818cf8" },
    },
    classes: {
      "OrganizationMemberDetail-root": "max-w-3xl mx-auto",
      "OrganizationMemberDetail-header": "mb-6",
      "OrganizationMemberDetail-rolesTab": "mt-4",
    },
  }}
/>
```

***

<h2 id="advanced-customization">
  高度なカスタマイズ
</h2>

<h3 id="available-hooks">
  利用可能なフック
</h3>

これらのフックは、UIを持たない基盤ロジックのみを提供します。Auth0 APIとの連携を活用しつつ、完全に独自のインターフェイスを構築したい場合にご利用ください。

| フック | 説明 |
| :- | :- |
| `useOrganizationMemberDetail` | 独自のメンバー詳細インターフェイスを構築するための、メンバー、ロール、モーダル、操作の状態。 |