Builder.io Ideas
Add a new idea Subscribe
Status Already exists
Created by Will Simons
Created on Dec 22, 2021

RELATED IDEAS

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);



Screen Shot 202...
Screen Shot 2021-12-21 at 6.31.10 PM.png
Open full size
Screen Shot 2021-12-21 at 6.31.10 PM.png
  • Attach files
  • Will Simons
    Reply
    |     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
    Reply
    |     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
    Reply
    |     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!