メインコンテンツまでスキップ

🎨 ブロックオーバーライドガイド

✨ 概要​

CreateOrganizationコンポーネントは、ブロックオーバーライドを通じて強力なカスタマイズ機能を提供します。このパターンにより、基本的な機能を維持しながら、フォーム構造、バリデーションロジック、UIコンポーネントを完全にカスタマイズできます。

🚀 基本的なオーバーライドパターン​

<CreateOrganization onCreateOrganization={handleSubmit}>
  {({defaultBlocks, defaultBlockOrder}) => ({
    blocks: {
      ...defaultBlocks,
      // ここで特定のブロックをオーバーライド
    },
    blockOrder: defaultBlockOrder
  })}
</CreateOrganization>

🔧 完全なカスタマイズ例​

日本の組織登録における高度な実例：

ライブエディター
<CreateOrganization
  onCreateOrganization={(formData) => {
    // フォームデータを処理
    console.log(formData);
  }}>
  {({defaultBlocks, defaultBlockOrder}) => ({
    blocks: {
      ...defaultBlocks,
      
      // 🎯 カスタムタイトル
      title: {
        ...defaultBlocks.title,
        props: {
          ...defaultBlocks.title.props,
          children: 'タイトル',
        },
      },
      
      // 📝 完全なコンポーネントオーバーライドでリッチな説明
      description: <p style={{color: 'black'}}>説明</p>,
      
      // 🏢 複雑なフォームオーバーライド
      form: {
        ...defaultBlocks.form,
        props: {
          ...defaultBlocks.form.props,
          children({defaultBlocks, defaultBlockOrder}) {
            return {
              blocks: {
                companyInformation: {
                  ...defaultBlocks.companyInformation,
                  props: {
                    ...defaultBlocks.companyInformation.props,
                    children({defaultBlocks}) {
                      return {
                        blocks: {
                          // 事前入力された値を持つカスタム会社名
                          companyName: <p style={{color: 'black'}}>カスタムブロック</p>,
                          
                          // バリデーション付きの会社説明
                          additionalInformation: {
                            ...defaultBlocks.additionalInformation,
                            props: {
                              ...defaultBlocks.additionalInformation.props,
                              name: 'description',
                              label: '説明',
                              isRequired: true,
                              placeholder: `説明を入力してください`,
                            },
                          },
                        },
                        blockOrder: [
                          'companyName',
                          'additionalInformation'
                        ],
                      };
                    },
                  },
                },
                
                // カスタム送信ボタン
                submitButton: {
                  ...defaultBlocks.submitButton,
                  props: {
                    ...defaultBlocks.submitButton.props,
                    children: "送信",
                  },
                },
              },
              blockOrder: defaultBlockOrder,
            };
          },
        },
      },
    },
    blockOrder: defaultBlockOrder,
  })}
</CreateOrganization>
結果
Loading...

🎯 主要なオーバーライド概念​

1. ブロックオーバーライド構造​

  • blocks: コンポーネント定義を含むオブジェクト
  • blockOrder: レンダリング順序を制御する配列
  • defaultBlocks: 元のコンポーネント構造
  • defaultBlockOrder: 元のレンダリング順序

2. 入れ子のオーバーライド​

form: {
  ...defaultBlocks.form,
  props: {
    ...defaultBlocks.form.props,
    children({defaultBlocks, defaultBlockOrder}) {
      // ここで入れ子のブロックオーバーライド
    }
  }
}

3. カスタムコンポーネント​

デフォルトブロックを完全にカスタムコンポーネントに置き換え：

customField: <MyCustomComponent {...props} />

📐 ベストプラクティス​

  1. 常にデフォルトpropsをスプレッドして既存の機能を維持
  2. 意味のあるブロック名を使用してメンテナンス性を向上
  3. blockOrderの一貫性を維持（意図的に順序を変更する場合を除く）
  4. カスタムフィールドに適切なバリデーションを実装
  5. ローディングとエラー状態を適切に処理

🚀 利点​

  • 🎨 完全なUI制御: フォームのあらゆる側面をカスタマイズ
  • 🔧 柔軟なバリデーション: カスタムバリデーションロジックの実装
  • 📱 レスポンシブデザイン: レスポンシブ動作の維持
  • 🔄 状態管理: フォーム状態の完全な制御

プロのヒント: 小さなオーバーライドから始めて、徐々に複雑さを構築しましょう。ブロックオーバーライドパターンは強力ですが、propsのスプレッドとコンポーネント構造に細心の注意が必要です。