defaultChildren, custom component?

Technical Questions
1

Is it possible to use a custom component in the defaultChildren?

So with the example here https://www.builder.io/c/docs/custom-react-components

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

export const Hero = props =>
  <div className={heroStyles}>{div}</div>

const HeroWithBuilderChildren = withChildren(Hero)

Builder.registerElement(HeroWithBuilderChildren, {
  name: 'Hero',
  // Adding defaults is important for easy usability
  defaultChildren: [
    { 
      '@type': '@builder.io/sdk:Element',
      component: { name: 'Text', options: { text: 'I am child text block!' } }
    }
  ]
})

I have registered an insertMenu called ‘Chakra’ and a Button component, would I be able to do:

Builder.registerElement(HeroWithBuilderChildren, {
  name: 'Hero',
  // Adding defaults is important for easy usability
  defaultChildren: [
    { 
      '@type': '@builder.io/sdk:Chakra',
      component: { name: 'Button' }
    }
  ]
})

Cheers!

2

Hey @cjl!

You are super close - you want the name field for your component name

So if your component is named Chakra via

Builder.registerComponent(ChakraComponent, { name: 'Chakra' })

you want to include it as

Builder.registerElement(HeroWithBuilderChildren, {
  name: 'Hero',
  defaultChildren: [
    { 
      '@type': '@builder.io/sdk:Element',
      component: { 
        name: 'Chakra', /* <- put the component name here */
        options: { /* optional - default props to pass to Chakra */ } 
      }
    }
  ]
})