Child components inside custom components

Technical Questions
,
1

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder public api key

What are you trying to accomplish
I want to have child component render from inside my custom components.

Screenshots or video link
I have a custom Button from my design system that renders as expected on my localhost. This component has a child prop with the type React.ReactNode. As a test, I passed this component instance two children 1) Another one of my custom components ‘Input’ and 2) the builder.io ‘button’ component. As you can see both show as nested layers in the layer view:
image
However, inspecting the button on the published page shows no nested components:

image
image914×71 17.8 KB

Code stack you are integrating Builder with
NextJS

Reproducible code example
My Button registry looks like this:

Builder.registerComponent(Button, {
  name: "Button",
  canHaveChildren: true,
  inputs: [
    { name: "label", type: "string", defaultValue: 'Button' },
    {
      name: "variant",
      type: "enum",
      enum: ["default", "secondary", "destructive", "outline", "link", "ghost"],
      defaultValue: "default",
    },
    {
      name: "size",
      type: "enum",
      enum: ["default", "sm", "lg", "icon"],
      defaultValue: "default",
    },
    { name: "prefixIcon", type: "string" },
    { name: "suffixIcon", type: "string" },
   
});
2

I think you need to wrap it with withChildren when you register it. So, you’d want to do:

Builder.registerComponent(withChildren(Button), {...})

(withChildren comes from @builder.io/react )

1 Like