Skip to Main Content
Builder.io Ideas
Status Already exists
Created by Will Simons
Created on Dec 22, 2021

Allow custom React components to have child dropzone "+ Add Block"

Create a React component that allows components that use withChildren to render a drop zone when no children are present.

This would help in the case when the defaultChildren are deleted or not present.


import { ChildDropZone, withChildren } from '@builder/react';

function CustomSection(props) {
return (
<div {...props.attributes}>
<ChildDropZone children={props.children} />
</div>
);

}


export default withChildren(CustomSection);



  • Attach files
  • Will Simons
    Jan 7, 2022

    Thanks @steve - I'll give that a try. I think I tried a slightly different version of what you've provided, so we'll see!


  • Admin
    Steve Sewell
    Jan 5, 2022

    I think the ideal solution here is the BuilderBlocks component, which does what you are looking for


    try this:

    import { BuilderBlocks, Builder } from '@builder.io/react';

    function CustomSection(props) {
    return (
    <div>
    <BuilderBlocks blocks={props.children} parentElementId={props.builderBlock.id} dataPath="children" />
    </div>
    );
    }

    Builder.registerComponent(CustomSection, {
    name: 'My Section',
    inputs: [/* optional, any other inputs */],
    // Optional, if you want default children. If none are provided or if children are empty the
    // "+ add block" button shows
    defaultChildren: [
    {
    '@type': '@builder.io/sdk:Element',
    component: {
    name: 'Text',
    options: {
    text: 'I am a default child!',
    },
    },
    }
    ]
    });


  • Logan
    Jan 5, 2022

    Hi there!

    Thank you for reaching out to our team with this idea. This is already similarly possible with the "blocks" subField. Your users will need to drop a block into the slot once the component is placed on the page. https://forum.builder.io/t/how-to-add-dynamic-editing-regions-to-custom-components/1323

    Does this match your use-case needs? If not, please let us know how you're envisioning the behavior of this Idea and how it might be different. Thank you!