where to spread props and pass refs exactly?

[ghost]

[joaom00]

Hi @terlan4,

Normally you want to forward the props and ref when you want to compose your own component with some part of some Radix component. A good example of this is when you already have your button component and want to use it instead of <Tooltip.Trigger /> or <Toolbar.Button /> because yours is already pre-styled. To do this, Radix has the asChild prop where it will compose the two components and merge their props. You can read more about it in the Composition guide in the documentation.

The reason you need to pass all the props and the ref - actually, you only need to pass the props that that part of the component, like the <Tooltip.Trigger />, needs to maintain functionality. For that, you would have to know the implementation details so you don't have to worry about it is good to get all the props in. And it's good practice anyway - is to attach the functionality to your own component. Regarding the ref, some components need to have access to the Trigger reference to be able to position the content correctly and among other things.

So, taking your example 1 and 2 where you want to composite the <Toolbar.Button /> with the <Tooltip.Trigger /> and you have your own button component. It is necessary to forward props and ref only in your own button:

// Button.tsx
const MyButton = React.forwardRef((props, ref) => (
   <button {...props} ref={ref} />
))

<Toolbar.Root>
   <Tooltip.Root>
     <Toolbar.Button asChild>
       <Tooltip.Trigger asChild>
         <MyButton>Button</MyButton>
       </Tooltip.Trigger>
     </Toolbar.Button>
     <Tooltip.Content>
       { ... }
     </Tooltip.Content>
   </Tooltip.Root>

   { ... }
</Toolbar.Root>

If you don't have your own component and are using the normal button tag, the asChild tag is not necessary.

In your third example, I don't see the need to forward the props and the reference. Unless you're going to compose SelectViewPort with some part of a Radix component via the asChild prop.

I hope it was clear! If you still have questions, don't hesitate to ask. I would be happy to help you!

[ghost]

[joaom00]

Where to spread the props and ref is where it makes sense for you. but in your case with Tooltip, you have to spread in <Tooltip.Trigger /> and the reason is that in your ToolbarButtonWithTooltip, the TooltipProvider is being wrapped by Toolbar.Button with asChild and because of that the Toolbar.Button will pass the props to your TooltipProvider and consequently you will have to pass it to Tooltip.Trigger. As for your SelectViewPort, I don't know where you are using it but I would say that it makes more sense to spread it in Select.Viewport.

On the question of the SelectItem example in the documentation. I believe it's for good practice and for people copying the code to be able to access all the props and refs in the custom SelectItem without having to touch the custom component.