I’ve seen the following pattern a lot in primitive components (like Radix UI) where layouts are rendered as custom children components. For example:
<List.Root>
<List.Title>Hello!</List.Title>
<List.Items>
<List.Item>Item 1</List.Item>
<List.Item>Item 2</List.Item>
<List.Item>Item 3</List.Item>
<List.Items>
<List.Root>
This will end up rendering some custom layout with styles, etc, like the following:
<div>
<span>Hello!</span>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
My question is: what even is the name of this pattern, and how would I achieve it using functional components? How would I pass states between each of the elements? I’ve looked at the source for some of the Radix components, but they all use some sort of abstracted primitives, and a lot of Contexts
. The example above is pretty simple, but you can imagine each Item having some custom styling and positioning, and not just returning a <li>
.
Any help would be appreciated!