Kicked off the migration to react-twc in one of my projects.

For simple components, it works well. But if they are not just styled, for example, if they need to render a different element, it gets verbose. <MyComponent as=“section” /> now needs the asChild prop and then the section element as a child. It’s not that bad, but I think it’s ugly.

<MyComponent asChild>
  <section>{children}</section>
</MyComponent>

As someone who also uses many Radix components, I’m familiar with it. So it is ok, but it still looks ugly.

For variants of the same element, I migrated to react-twc with cva. Which gives a clean look and makes clear what needs to be used.

And for the rest, for example, labels and inputs, I kept them as is, for now. The label and inputs are wrapped with a div. Also, I need to pass down the Radix Form elements with the as prop.

Thoughts

For some components, I have to refactor the code. At the current state, I don't know whether it's worth using react-twc or not. For simple components, I think it is awesome. Furthermore, for components with plenty of variants, by using CVA. But for a complex one, I have to think about it and work out something that fits.

---

44 of #100DaysToOffload
#log #dev
Thoughts? Discuss...