🎨 Block Overriding Guide

✨ Overview

The CreateOrganization component provides powerful customization capabilities through block overriding. This pattern allows you to completely customize the form structure, validation logic, and UI components while maintaining the underlying functionality.

🚀 Basic Overriding Pattern

<CreateOrganization onCreateOrganization={handleSubmit}>
  {({defaultBlocks, defaultBlockOrder}) => ({
    blocks: {
      ...defaultBlocks,
      // Override specific blocks here
    },
    blockOrder: defaultBlockOrder
  })}
</CreateOrganization>

🔧 Complete Customization Example

Here's a real-world example showcasing advanced Japanese organization registration:

Live Editor

<CreateOrganization
  onCreateOrganization={(formData) => {
    // Process form data
    console.log(formData);
  }}>
  {({defaultBlocks, defaultBlockOrder}) => ({
    blocks: {
      ...defaultBlocks,
      
      // 🎯 Custom Title
      title: {
        ...defaultBlocks.title,
        props: {
          ...defaultBlocks.title.props,
          children: 'Title',
        },
      },
      
      // 📝 Rich Description with full component override
      description: <p style={{color: 'black'}}>Description</p>,
      
      // 🏢 Complex Form Override
      form: {
        ...defaultBlocks.form,
        props: {
          ...defaultBlocks.form.props,
          children({defaultBlocks, defaultBlockOrder}) {
            return {
              blocks: {
                companyInformation: {
                  ...defaultBlocks.companyInformation,
                  props: {
                    ...defaultBlocks.companyInformation.props,
                    children({defaultBlocks}) {
                      return {
                        blocks: {
                          // Custom company name with pre-filled value
                          companyName: <p style={{color: 'black'}}>Custom block</p>,
                          
                          // Company description with validation
                          additionalInformation: {
                            ...defaultBlocks.additionalInformation,
                            props: {
                              ...defaultBlocks.additionalInformation.props,
                              name: 'description',
                              label: 'Description',
                              isRequired: true,
                              placeholder: `Description`,
                            },
                          },
                        },
                        blockOrder: [
                          'companyName',
                          'additionalInformation'
                        ],
                      };
                    },
                  },
                },
                
                // Custom submit button
                submitButton: {
                  ...defaultBlocks.submitButton,
                  props: {
                    ...defaultBlocks.submitButton.props,
                    children: "Submit",
                  },
                },
              },
              blockOrder: defaultBlockOrder,
            };
          },
        },
      },
    },
    blockOrder: defaultBlockOrder,
  })}
</CreateOrganization>

Result

Loading...

🎯 Key Overriding Concepts

1. Block Override Structure

• blocks: Object containing component definitions
• blockOrder: Array controlling render sequence
• defaultBlocks: Original component structure
• defaultBlockOrder: Original render sequence

2. Nested Overriding

form: {
  ...defaultBlocks.form,
  props: {
    ...defaultBlocks.form.props,
    children({defaultBlocks, defaultBlockOrder}) {
      // Nested block overriding here
    }
  }
}

3. Custom Components

Replace default blocks with completely custom components:

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

📐 Best Practices

1. Always spread default props to maintain existing functionality
2. Use meaningful block names for better maintainability
3. Maintain blockOrder consistency unless intentionally reordering
4. Implement proper validation for custom fields
5. Handle loading and error states appropriately

🚀 Benefits

• 🎨 Complete UI Control: Customize every aspect of the form
• 🔧 Flexible Validation: Implement custom validation logic
• 📱 Responsive Design: Maintain responsive behavior
• 🔄 State Management: Full control over form state

---

Pro Tip: Start with small overrides and gradually build complexity. The block overriding pattern is powerful but requires careful attention to prop spreading and component structure.