Is there a way to enforce children of a particular component type?

I'm wanting to make a component that only accepts children that are a specific component so for example:

// Valid
<CodeGroup>
  <Code label="Ctrl" />
  <Code label="M" />
</CodeGroup>

// Invalid
<CodeGroup>
  <div>hi</div>
</CodeGroup>

// Valid
<CodeGroup>
  <Code label="Ctrl" />
  <Code label="M" />
</CodeGroup>

// Invalid
<CodeGroup>
  <div>hi</div>
</CodeGroup>

// Valid
<CodeGroup>
  <Code label="Ctrl" />
  <Code label="M" />
</CodeGroup>

// Invalid
<CodeGroup>
  <div>hi</div>
</CodeGroup>

// Valid
<CodeGroup>
  <Code label="Ctrl" />
  <Code label="M" />
</CodeGroup>

// Invalid
<CodeGroup>
  <div>hi</div>
</CodeGroup>

I tried playing around with

FlowProps

FlowProps

FlowProps

FlowProps and

FlowComponent

FlowComponent

FlowComponent

FlowComponent but couldn't quite get it to work. I think I'm pretty close but I'm not sure how I can allow passing the result of calling <Code /> while also enforcing the children are of type

Code

Code

Code

Code.

So as a prop,

items: (typeof Code)[]

items: (typeof Code)[]

items: (typeof Code)[]

items: (typeof Code)[] for example allows me pass in

Code

Code

Code

Code but not

<Code />

<Code />

<Code />

<Code />.

Is there a way to enforce children of a particular component type?

Similar Threads

Similar Threads

Similar Threads