Export compound components instead of one giant component

[tarngerine]

trafficstars

I'm aware this may be out of scope for your v7 roadmap, but I wanted to share it here.

This is something that Radix/HeadlessUI use and I feel like is more flexible, especially when it comes to layout. The general pattern is to provide a Root that contains the context, and the individual pieces like Input and TagList as pieces that the developer can place in a DOM structure they want, and access the context when wrapped in Root.

This has the added benefit of reducing the number of top-level props — by exporting the lower level components themselves, a developer can take advantage of the native React component props, such as all the event handlers, className, etc, which can cut down on the top-level props like classNames, onInput, isDisabled, placeholderText

Note that you can do this in addition to maintaining a "Default plug-and-play assembly" component that folks who want to just quickly use it can, but offer additional flexibility to reduce prop surface/maintenance as use cases grow.

This was a nice article that I learned the concept from: https://www.smashingmagazine.com/2021/08/compound-components-react/