Web で組織の詳細を編集する

OrganizationDetailsEdit コンポーネントは、組織の詳細を編集するための統合インターフェースを提供します。

React
Next.js
shadcn

設定の要件

Auth0 Configuration が必要です—tenant で My Organization API が設定されていることを確認してください。設定ガイドを表示 →

インストール

pnpm add @auth0/universal-components-react

npm install @auth0/universal-components-react

どちらのコマンドを実行しても、共有ユーティリティとAuth0連携に必要な@auth0/universal-components-core 依存パッケージもインストールされます。

はじめに

import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
import { useNavigate } from "react-router-dom";

export function OrganizationSettingsPage() {
  const navigate = useNavigate();

  return (
    <OrganizationDetailsEdit
      saveAction={{
        onAfter: () => navigate("/organization"),
      }}
      backButton={{
        onClick: () => navigate("/organization"),
      }}
    />
  );
}

import React from "react";
import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";
import { analytics } from "./lib/analytics";

function OrganizationSettingsPage() {
  const navigate = useNavigate();

  const handleSaveSuccess = (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <OrganizationDetailsEdit
        schema={{
          details: {
            displayName: {
              required: true,
              maxLength: 100,
            },
            color: {
              regex: /^#[0-9A-Fa-f]{6}$/,
              errorMessage: "有効な16進数カラーコードを入力してください",
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`"${org.display_name}" への変更を保存しますか?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onBefore: () => confirm("保存されていない変更を破棄しますか?"),
          onAfter: () => navigate("/organization"),
        }}
        backButton={{
          onClick: () => navigate("/organization"),
        }}
        customMessages={{
          header: {
            title: "組織の設定",
          },
          notifications: {
            save_success: "設定が正常に保存されました!",
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetailsEdit-form": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const domain = "your-domain.auth0.com";
  const clientId = "your-client-id";

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler="popup" // Universal Loginのポップアップでステップアップ認証のチャレンジを処理するために必要
    >
      <Auth0ComponentProvider domain={domain}>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

プロップス

必須のプロップス

必須プロップスはコンポーネントの動作に不可欠です。OrganizationDetailsEdit に必須プロップスはなく、現在の organization の詳細は My Organization API から自動的に読み込まれます。

表示関連のプロップス

表示用のプロップスは、コンポーネントの動作に影響を与えることなく、その表示方法を制御します。セクションを非表示にしたり、読み取り専用モードを有効にしたりする際に使用します。

プロパティ	型	説明
`readOnly`	`boolean`	すべてのフォーム入力を無効にします。デフォルト: `false`
`hideHeader`	`boolean`	ヘッダーセクションを非表示にします。デフォルト: `false`

Action のプロップス

Actionのプロップスはユーザー操作を処理し、ユーザーが変更を保存またはキャンセルしたときの動作を定義します。ライフサイクルフック (onBefore、onAfter) を使用すると、アプリケーションのルーティングや分析と連携できます。

プロパティ	型	説明
`saveAction`	`ComponentAction<OrganizationPrivate>`	変更を保存するアクション。
`cancelAction`	`ComponentAction<OrganizationPrivate>`	変更をキャンセルまたは破棄するアクション。
`backButton`	`Object`	戻るボタンの設定。

saveAction型: ComponentAction<OrganizationPrivate>ユーザーが organization の変更を送信した際の保存フローを制御します。保存の成功後に別の画面へ遷移させるには onAfter を使用します。プロパティ:

disabled—保存ボタンを無効にします (たとえば、別の操作の実行中) 。
onBefore(data)—保存処理の前に実行されます。保存を中止するにはfalseを返します (たとえば、先に確認ダイアログを表示する場合) 。
onAfter(data)—organizationが正常に保存された後に実行されます。画面遷移やイベントの追跡に使用します。

例:

// 保存後に前の画面へ戻る
saveAction={{
  onAfter: () => navigate("/organization"),
}}

// 保存前に確認ダイアログを表示する
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => navigate("/organization"),
}}

// 保存時に分析イベントを記録する
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  },
}}

cancelAction型: ComponentAction<OrganizationPrivate>キャンセル/破棄のフローを制御します。破棄された変更の管理には、このアクションを使用します。プロパティ:

disabled—キャンセルボタンを無効にします
onBefore(data)—キャンセル操作の前に実行されます。キャンセルを中止するには false を返します (例：未保存の変更を破棄する前に確認する場合) 。
onAfter(data)—キャンセルが確定した後に実行されます。Form から移動する際に使用します。

例：

<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    onAfter: () => navigate("/organization"),
  }}
/>

backButton型: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }コンポーネントヘッダー内の戻るボタンを設定します。organizationの概要ページや前のページに戻る導線として使用します。プロパティ:

icon—カスタム Lucide アイコンコンポーネント (任意。デフォルトは ArrowLeft)
onClick—ナビゲーション用のクリックハンドラー

例:

import { ChevronLeft } from "lucide-react";

<OrganizationDetailsEdit
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/organization"),
  }}
/>;

カスタマイズ用プロップス

カスタマイズ用のプロップスを使えば、ソースコードを変更せずに、ブランド、ロケール、バリデーションの要件に合わせてコンポーネントを調整できます。

プロパティ	型	説明
`schema`	`OrganizationDetailsEditSchemas`	フィールドのバリデーションルール。
`customMessages`	`Partial<OrganizationDetailsEditMessages>`	i18nテキストのオーバーライド。
`styling`	`ComponentStyling<OrganizationEditClasses>`	CSS変数とクラスのオーバーライド。

スキーマorganizationの詳細フィールドにカスタムのバリデーションルールを設定します。

利用可能なスキーマフィールド

すべての schema フィールドでサポート: regex, errorMessage, minLength, maxLength, requireddetails.name—組織の内部名 details.displayName—組織の表示名 details.color—ブランドカラー (16進数形式) details.logoURL—ロゴ URL

<OrganizationDetailsEdit
  schema={{
    details: {
      name: {
        minLength: 3,
        maxLength: 50,
        regex: /^[a-zA-Z0-9-_]+$/,
        errorMessage: "Name must be alphanumeric with hyphens/underscores",
      },
      displayName: {
        required: true,
        maxLength: 100,
      },
      color: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

customMessagesすべてのテキストと翻訳をカスタマイズできます。すべてのフィールドは任意で、指定しない場合はデフォルト値が使用されます。

利用可能なメッセージ

header—コンポーネントヘッダー

title, description, back_button_text

form—フォームのフィールド

fields.name—label, placeholder, helper_text, error
fields.display_name—label, placeholder, helper_text, error
fields.color—label, placeholder, helper_text, error
fields.logo_url—label, placeholder, helper_text, error

actions—ボタンのラベル

save_button_text, cancel_button_text

notifications—APIレスポンス

save_success, save_error, general_error

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
      description: "Update your organization's settings",
    },
    form: {
      fields: {
        name: {
          label: "Organization ID",
          helper_text: "Internal identifier (cannot be changed after creation)",
        },
        display_name: {
          label: "Organization Name",
          placeholder: "Enter display name",
        },
      },
    },
    notifications: {
      save_success: "Organization updated successfully!",
    },
  }}
/>

スタイリングCSS変数とクラスのオーバーライドで外観をカスタマイズできます。テーマに応じたスタイリングにも対応しています。

利用可能なスタイリングオプション

変数—CSS カスタムプロパティ

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

クラス—コンポーネントクラスのオーバーライド

OrganizationDetailsEdit-header
OrganizationDetailsEdit-form
OrganizationDetailsEdit-actions

<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetailsEdit-form": "shadow-lg rounded-xl p-6",
    },
  }}
/>

高度なカスタマイズ

OrganizationDetailsEdit コンポーネントは、より小さなサブコンポーネントとフックで構成されています。shadcn を使用している場合は、これらを個別に import して、独自の organization 編集ワークフローを構築できます。

利用可能なサブコンポーネント

高度なユースケースでは、個々のサブコンポーネントをインポートして、独自のorganization編集インターフェースを構築できます。

コンポーネント	説明
`OrganizationForm`	すべてのフィールドを含むメインのフォームコンポーネント
`ColorPickerField`	ブランドカラーを選択するフィールド
`LogoUploadField`	プレビュー付きのロゴ URL 入力フィールド

利用可能なHooks

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

Hook	説明
`useOrganizationDetailsEdit`	組織の編集ロジックと API 連携

設定の要件

Auth0 Configuration が必要です—tenant が My Organization API で構成されていることを確認してください。設定ガイドを表示 →

インストール

npm install @auth0/universal-components-react

pnpm add @auth0/universal-components-react

npm または pnpm コマンドを実行すると、共通ユーティリティと Auth0 連携用の @auth0/universal-components-core 依存パッケージがインストールされます。

はじめに

page.tsx

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

export function OrganizationSettingsPage() {
  const router = useRouter();

  return (
    <OrganizationDetailsEdit
      saveAction={{
        onAfter: () => router.push("/organization"),
      }}
      backButton={{
        onClick: () => router.push("/organization"),
      }}
    />
  );
}

連携の完全な例

import React from "react";
import { OrganizationDetailsEdit } from "@auth0/universal-components-react";
import { useRouter } from "next/navigation";
import { analytics } from "./lib/analytics";

function OrganizationSettingsPage() {
  const router = useRouter();

  const handleSaveSuccess = (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    router.push("/organization");
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <OrganizationDetailsEdit
        schema={{
          details: {
            displayName: {
              required: true,
              maxLength: 100,
            },
            color: {
              regex: /^#[0-9A-Fa-f]{6}$/,
              errorMessage: "Enter a valid hex color",
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`Save changes to "${org.display_name}"?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onBefore: () => confirm("Discard unsaved changes?"),
          onAfter: () => router.push("/organization"),
        }}
        backButton={{
          onClick: () => router.push("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          notifications: {
            save_success: "Settings saved successfully!",
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetailsEdit-form": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default OrganizationSettingsPage;

プロップス

主要なプロップス

コアプロップスは、コンポーネントの動作に欠かせないものです。OrganizationDetailsEdit には必須のプロップスはなく、現在の organization の詳細を My Organization API から自動的に読み込みます。

表示関連のプロップス

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

プロパティ	型	説明
`readOnly`	`boolean`	すべてのフォーム入力を無効にします。デフォルト: `false`
`hideHeader`	`boolean`	ヘッダーセクションを非表示にします。デフォルト: `false`

Action のプロップス

Actionのプロップスは、ユーザー操作を処理し、ユーザーが変更を保存またはキャンセルしたときの動作を定義します。ライフサイクルフック (onBefore、onAfter) を使用すると、アプリケーションのルーティングや分析と連携できます。

プロパティ	型	説明
`saveAction`	`ComponentAction<OrganizationPrivate>`	変更を保存するアクション。
`cancelAction`	`ComponentAction<OrganizationPrivate>`	変更をキャンセルまたは破棄するアクション。
`backButton`	`Object`	戻るボタンの設定。

saveAction型: ComponentAction<OrganizationPrivate>ユーザーがorganizationの変更を送信した際の保存フローを制御します。保存が成功した後に別の画面へ遷移させるには onAfter を使用します。プロパティ:

disabled—保存ボタンを無効にします (たとえば、別の操作の実行中など) 。
onBefore(data)—保存操作の前に実行されます。保存を中止するには false を返します (たとえば、先に確認ダイアログを表示する場合) 。
onAfter(data)—organization が正常に保存された後に実行されます。画面遷移やイベントの追跡に使用します。

よくあるパターン:

// 保存後に前の画面へ戻る
saveAction={{
  onAfter: () => router.push("/organization"),
}}

// 保存前に確認ダイアログを表示する
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => router.push("/organization"),
}}

// 保存時に分析イベントを記録する
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    router.push("/organization");
  },
}}

cancelAction型: ComponentAction<OrganizationPrivate>キャンセル/破棄のフローを制御します。破棄された変更を管理するには、このアクションを使用します。プロパティ:

disabled—キャンセルボタンを無効にします
onBefore(data)—キャンセル操作の前に実行されます。キャンセルを中止するには false を返します (例: 未保存の変更を破棄するか確認する場合) 。
onAfter(data)—キャンセルが確定した後に実行されます。Form から移動するには、これを使用します。

例:

<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    onAfter: () => router.push("/organization"),
  }}
/>

backButton型: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }コンポーネントのヘッダーにある戻るボタンを設定します。organizationの概要ページや前のページに戻るために使用します。プロパティ:

icon—カスタム Lucide アイコンコンポーネント (省略可、デフォルトは ArrowLeft)
onClick—ナビゲーション用のクリックハンドラー

例:

import { ChevronLeft } from "lucide-react";

<OrganizationDetailsEdit
  backButton={{
    icon: ChevronLeft,
    onClick: () => router.push("/organization"),
  }}
/>;

カスタマイズ用プロップス

プロパティ	型	説明
`schema`	`OrganizationDetailsEditSchemas`	フィールドのバリデーションルール。
`customMessages`	`Partial<OrganizationDetailsEditMessages>`	i18n テキストの上書き。
`styling`	`ComponentStyling<OrganizationEditClasses>`	CSS 変数とクラスの上書き。

スキーマorganizationの詳細フィールドにカスタムのバリデーションルールを設定します。

利用可能なスキーマフィールド

すべての schema フィールドでサポートされる項目: regex、errorMessage、minLength、maxLength、requireddetails.name—組織の内部名 details.displayName—組織の表示名 details.color—ブランドカラー (16進数形式) details.logoURL—ロゴ URL

<OrganizationDetailsEdit
  schema={{
    details: {
      name: {
        minLength: 3,
        maxLength: 50,
        regex: /^[a-zA-Z0-9-_]+$/,
        errorMessage: "Name must be alphanumeric with hyphens/underscores",
      },
      displayName: {
        required: true,
        maxLength: 100,
      },
      color: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

customMessagesすべてのテキストと翻訳をカスタマイズできます。すべてのフィールドは任意で、指定しない場合はデフォルト値が使用されます。

利用可能なメッセージ

header—コンポーネントのヘッダー

title, description, back_button_text

form—Formのフィールド

fields.name—label, placeholder, helper_text, error
fields.display_name—label, placeholder, helper_text, error
fields.color—label, placeholder, helper_text, error
fields.logo_url—label, placeholder, helper_text, error

actions—ボタンのラベル

save_button_text, cancel_button_text

notifications—APIレスポンス

save_success, save_error, general_error

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
      description: "Update your organization's settings",
    },
    form: {
      fields: {
        name: {
          label: "Organization ID",
          helper_text: "Internal identifier (cannot be changed after creation)",
        },
        display_name: {
          label: "Organization Name",
          placeholder: "Enter display name",
        },
      },
    },
    notifications: {
      save_success: "Organization updated successfully!",
    },
  }}
/>

スタイリングCSS変数とクラスのオーバーライドで外観をカスタマイズできます。テーマに応じたスタイリングにも対応しています。

利用可能なスタイル設定

変数—CSS カスタムプロパティ

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

クラス—コンポーネントクラスのオーバーライド

OrganizationDetailsEdit-header
OrganizationDetailsEdit-form
OrganizationDetailsEdit-actions

<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetailsEdit-form": "shadow-lg rounded-xl p-6",
    },
  }}
/>

高度なカスタマイズ

OrganizationDetailsEdit コンポーネントは、より小さなサブコンポーネントとフックで構成されています。これらを個別にインポートすることで、独自の organization 編集ワークフローを構築できます。

利用可能なサブコンポーネント

高度なユースケースでは、個々のサブコンポーネントをインポートして、独自の organization 編集インターフェースを構築できます。

コンポーネント	説明
`OrganizationForm`	すべてのフィールドを含むメインのフォームコンポーネント
`ColorPickerField`	ブランドカラーを選択するフィールド
`LogoUploadField`	プレビュー付きのロゴ URL 入力欄

利用可能なHooks

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

Hook	説明
`useOrganizationDetailsEdit`	組織の編集ロジックとAPI連携

設定の要件

Auth0 の設定が必要です—tenant が My Organization API 用に設定されていることを確認してください。設定ガイドを表示 →

インストール

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/organization-details-edit.json

shadcn コマンドを実行すると、共有ユーティリティと Auth0 連携に必要な @auth0/universal-components-core 依存関係もインストールされます。

はじめに

import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";

export function OrganizationSettingsPage() {
  const navigate = useNavigate();

  return (
    <OrganizationDetailsEdit
      saveAction={{
        onAfter: () => navigate("/organization"),
      }}
      backButton={{
        onClick: () => navigate("/organization"),
      }}
    />
  );
}

連携の完全な例

import React from "react";
import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";
import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import { useNavigate } from "react-router-dom";
import { analytics } from "./lib/analytics";

function OrganizationSettingsPage() {
  const navigate = useNavigate();

  const handleSaveSuccess = (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  };

  return (
    <div className="max-w-2xl mx-auto p-6">
      <OrganizationDetailsEdit
        schema={{
          details: {
            displayName: {
              required: true,
              maxLength: 100,
            },
            color: {
              regex: /^#[0-9A-Fa-f]{6}$/,
              errorMessage: "Enter a valid hex color",
            },
          },
        }}
        saveAction={{
          onBefore: (org) => {
            return confirm(`Save changes to "${org.display_name}"?`);
          },
          onAfter: handleSaveSuccess,
        }}
        cancelAction={{
          onBefore: () => confirm("Discard unsaved changes?"),
          onAfter: () => navigate("/organization"),
        }}
        backButton={{
          onClick: () => navigate("/organization"),
        }}
        customMessages={{
          header: {
            title: "Organization Settings",
          },
          notifications: {
            save_success: "Settings saved successfully!",
          },
        }}
        styling={{
          variables: {
            common: {
              "--color-primary": "#059669",
            },
          },
          classes: {
            "OrganizationDetailsEdit-form": "shadow-xl rounded-lg",
          },
        }}
      />
    </div>
  );
}

export default function App() {
  const domain = "your-domain.auth0.com";
  const clientId = "your-client-id";

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler="popup" // Universal Login のポップアップでステップアップ認証のチャレンジを処理するために必要
    >
      <Auth0ComponentProvider domain={domain}>
        <OrganizationSettingsPage />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

プロップス

主要なプロップス

コアプロップスはコンポーネントの動作に不可欠です。OrganizationDetailsEdit に必須のプロップスはありません。現在の organization の詳細は、My Organization API から自動的に読み込まれます。

表示関連のプロップス

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

プロパティ	型	説明
`readOnly`	`boolean`	すべてのフォーム入力を無効にします。デフォルト: `false`
`hideHeader`	`boolean`	ヘッダーセクションを非表示にします。デフォルト: `false`

Action のプロップス

Actionのプロップスは、ユーザー操作を処理し、ユーザーが変更を保存またはキャンセルしたときの動作を定義します。ライフサイクルフック (onBefore、onAfter) を使用すれば、アプリケーションのルーティングや分析と連携できます。

プロパティ	型	説明
`saveAction`	`ComponentAction<OrganizationPrivate>`	変更を保存するアクション。
`cancelAction`	`ComponentAction<OrganizationPrivate>`	変更をキャンセルまたは破棄するアクション。
`backButton`	`Object`	戻るボタンの設定。

disabled—保存ボタンを無効にします (たとえば、別の操作の実行中) 。
onBefore(data)—保存操作の前に実行されます。false を返すと保存を中止できます (たとえば、先に確認ダイアログを表示する場合) 。
onAfter(data)—organization が正常に保存された後に実行されます。画面遷移やイベントの追跡に使用します。

よくあるパターン:

// 保存後に元の画面へ戻る
saveAction={{
  onAfter: () => navigate("/organization"),
}}

// 保存前に確認ダイアログを表示する
saveAction={{
  onBefore: (org) => {
    return confirm(`Save changes to "${org.display_name}"?`);
  },
  onAfter: () => navigate("/organization"),
}}

// 保存時に分析イベントを記録する
saveAction={{
  onAfter: (org) => {
    analytics.track("Organization Updated", {
      name: org.name,
      displayName: org.display_name,
    });
    navigate("/organization");
  },
}}

disabled—キャンセルボタンを無効にします
onBefore(data)—キャンセル操作の前に実行されます。キャンセルを中止するには、false を返します (例：未保存の変更を破棄する前に確認する場合) 。
onAfter(data)—キャンセルが確定した後に実行されます。Formから移動する際に使用します。

例:

<OrganizationDetailsEdit
  cancelAction={{
    onBefore: (org) => {
      return confirm("Discard unsaved changes?");
    },
    onAfter: () => navigate("/organization"),
  }}
/>

backButton型: { icon?: LucideIcon; onClick: (e: MouseEvent) => void }コンポーネントのヘッダーにある戻るボタンを設定します。organization の概要ページや前のページに戻る導線として使用します。プロパティ:

icon—カスタム Lucide アイコンコンポーネント (省略可。デフォルトは ArrowLeft)
onClick—ナビゲーション用のクリックハンドラー

例:

import { ChevronLeft } from "lucide-react";

<OrganizationDetailsEdit
  backButton={{
    icon: ChevronLeft,
    onClick: () => navigate("/organization"),
  }}
/>;

カスタマイズ用プロップス

プロパティ	型	説明
`schema`	`OrganizationDetailsEditSchemas`	フィールドのバリデーションルール。
`customMessages`	`Partial<OrganizationDetailsEditMessages>`	i18n テキストの上書き。
`styling`	`ComponentStyling<OrganizationEditClasses>`	CSS 変数およびクラスの上書き。

スキーマorganizationの詳細フィールドにカスタムのバリデーションルールを設定します。

使用可能なスキーマフィールド

すべてのschemaフィールドでサポートされる項目: regex, errorMessage, minLength, maxLength, requireddetails.name—組織の内部名 details.displayName—組織の表示名 details.color—ブランドカラー (16進数形式) details.logoURL—ロゴのURL

<OrganizationDetailsEdit
  schema={{
    details: {
      name: {
        minLength: 3,
        maxLength: 50,
        regex: /^[a-zA-Z0-9-_]+$/,
        errorMessage: "Name must be alphanumeric with hyphens/underscores",
      },
      displayName: {
        required: true,
        maxLength: 100,
      },
      color: {
        regex: /^#[0-9A-Fa-f]{6}$/,
        errorMessage: "Enter a valid hex color (e.g., #FF5500)",
      },
      logoURL: {
        regex: /^https:\/\/.+/,
        errorMessage: "Logo URL must use HTTPS",
      },
    },
  }}
/>

customMessagesすべてのテキストと翻訳をカスタマイズできます。すべてのフィールドは任意で、指定しない場合はデフォルト値が使用されます。

利用可能なメッセージ

header—コンポーネントヘッダー

title, description, back_button_text

form—Formのフィールド

fields.name—label, placeholder, helper_text, error
fields.display_name—label, placeholder, helper_text, error
fields.color—label, placeholder, helper_text, error
fields.logo_url—label, placeholder, helper_text, error

actions—ボタンラベル

save_button_text, cancel_button_text

notifications—APIレスポンス

save_success, save_error, general_error

<OrganizationDetailsEdit
  customMessages={{
    header: {
      title: "Edit Organization",
      description: "Update your organization's settings",
    },
    form: {
      fields: {
        name: {
          label: "Organization ID",
          helper_text: "Internal identifier (cannot be changed after creation)",
        },
        display_name: {
          label: "Organization Name",
          placeholder: "Enter display name",
        },
      },
    },
    notifications: {
      save_success: "Organization updated successfully!",
    },
  }}
/>

スタイリングCSS変数とクラスのオーバーライドで外観をカスタマイズできます。テーマに応じたスタイリングにも対応しています。

利用可能なスタイル設定

変数—CSS カスタムプロパティ

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

クラス—コンポーネントクラスのオーバーライド

OrganizationDetailsEdit-header
OrganizationDetailsEdit-form
OrganizationDetailsEdit-actions

<OrganizationDetailsEdit
  styling={{
    variables: {
      common: {
        "--font-size-title": "1.5rem",
      },
      light: {
        "--color-primary": "#059669",
      },
    },
    classes: {
      "OrganizationDetailsEdit-form": "shadow-lg rounded-xl p-6",
    },
  }}
/>

高度なカスタマイズ

OrganizationDetailsEdit コンポーネントは、より小さなサブコンポーネントとフックで構成されています。shadcn を使用している場合は、それらを個別に import して、独自の organization 編集ワークフローを構築できます。

利用可能なサブコンポーネント

高度なユースケースでは、個々のサブコンポーネントをインポートして、独自の organization 編集インターフェースを構築できます。

コンポーネント	説明
`OrganizationForm`	すべてのフィールドを含むメインフォームコンポーネント
`ColorPickerField`	ブランドカラーを選択するためのカラーピッカー
`LogoUploadField`	ロゴのアップロードと管理用フィールド

利用可能なHooks

Hook	説明
`useOrganizationDetailsEdit`	Organization データの取得・編集ロジック
`useOrganizationDetailsEditLogic`	Form の状態とアクションハンドラー

Web コンポーネント

iOS コンポーネント

Android コンポーネント

Web で組織の詳細を編集する

設定の要件

インストール

はじめに

プロップス

必須のプロップス

表示関連のプロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なサブコンポーネント

利用可能なHooks

設定の要件

インストール

はじめに

プロップス

主要なプロップス

表示関連のプロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なサブコンポーネント

利用可能なHooks

設定の要件

インストール

はじめに

プロップス

主要なプロップス

表示関連のプロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なサブコンポーネント

利用可能なHooks

​設定の要件

​インストール

​はじめに

​プロップス

​必須のプロップス

​表示関連のプロップス

​Action のプロップス

​カスタマイズ用プロップス

​高度なカスタマイズ

​利用可能なサブコンポーネント

​利用可能なHooks

​設定の要件

​インストール

​はじめに

​プロップス

​主要なプロップス

​表示関連のプロップス

​Action のプロップス

​カスタマイズ用プロップス

​高度なカスタマイズ

​利用可能なサブコンポーネント

​利用可能なHooks

​設定の要件

​インストール

​はじめに

​プロップス

​主要なプロップス

​表示関連のプロップス

​Action のプロップス

​カスタマイズ用プロップス

​高度なカスタマイズ

​利用可能なサブコンポーネント

​利用可能なHooks

設定の要件

インストール

はじめに

プロップス

必須のプロップス

表示関連のプロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なサブコンポーネント

利用可能なHooks

設定の要件

インストール

はじめに

プロップス

主要なプロップス

表示関連のプロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なサブコンポーネント

利用可能なHooks

設定の要件

インストール

はじめに

プロップス

主要なプロップス

表示関連のプロップス

Action のプロップス

カスタマイズ用プロップス

高度なカスタマイズ

利用可能なサブコンポーネント

利用可能なHooks