How to write a component like radix?

[lsy0xcc]

Sorry to ask this stupid question. I'm new to Reactjs and I was using Vue most of time. I really want to write a component like Radix. For example I want to use my component like this.

<MyComponent.Root> 
  <MyComponent.Inner1>example1</MyComponent.Inner1> 
  <MyComponent.Inner2>example2</MyComponent.Inner2>
</MyComponent.Root>

How can I write MyComponent add tell the difference of Inner1 and Inner2 in MyComponent?

[benoitgrelard]

There are a few ways of doing this compound component pattern:

• either you attach the parts statically to the root component (that has potential issues with tree-shaking if some of the parts are optional for example, as the users will more than likely incur the weight of that code anyway as it's attached to the root)
• what we do in Radix is because we have separate packages, we expose the parts as separate components, and make use of import * as … pattern (we also export them named, but that's kinda irrelevant here)

Take a look at this example:

primitives/packages/react/avatar/src/Avatar.tsx

Lines 149 to 163 in 6ad72cb

	const Root = Avatar;
	const Image = AvatarImage;
	const Fallback = AvatarFallback;
	export {
	createAvatarScope,
	//
	Avatar,
	AvatarImage,
	AvatarFallback,
	//
	Root,
	Image,
	Fallback,
	};

[lsy0xcc]

Thank you for your fantastic answer, I still have another question. In MyComponent.Root how can it tell the type of its each child form children object, for example Inner1, Inner2 or any other component like div?

[joaom00]

You can type your components like

type RootElement = React.ComponentRef<'div'>
type RootProps = React.ComponentPropsWithoutRef<'div'>

const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => <div {...props} ref={forwardedRef} />)

[lsy0xcc]

Thank you for your reply, I still want to know how the Root component know it's children's type. For example, Root will know it's 1st child and 3rd child are type Inner2 and 2nd child is Inner1. But how does Root know it? By using which API?

<MyComponent.Root>
 
 <MyComponent.Inner2>example2</MyComponent.Inner2>
 
<MyComponent.Inner1>example1</MyComponent.Inner1>
 
 <MyComponent.Inner2>example2</MyComponent.Inner2>
</MyComponent.Root>

[joaom00]

As the type of children is React.ReactNode it will accept all valid types for a react children. Could be a component, array of components, a string, etc.

Root doesn't know that the first child is Inner2, only knows that it's a valid react children.

[lsy0xcc]

Thank you very much!