Hacker News new | ask | show | jobs
by lewisl9029 2617 days ago
Note that the above mostly applies to company/product specific component libraries where maintaining design/brand consistency is of great importance. For components meant for public consumption, I personally would only use libraries that yield _all_ rendering decisions to the user: not just styling, but the components being rendered as well as the way in which those components are composed.

Usually that means providing state & handlers through a render prop API, so users can compose their own styled components in arbitrary arrangements that wouldn't be possible with an interface that only exposes specific component overrides inside of a rigid structure. See downshift as an example of a library that does this really well (https://github.com/downshift-js/downshift), and contrast that to something like react-select that only offers the ability to provide overrides for specific components in its own predefined render tree (https://github.com/JedWatson/react-select).

Perhaps on top of that you can also provide a reasonable styled default, but not offering low level control of rendering is usually a deal breaker in my book when picking third party components to work with.

2 comments

I think there's a big difference between Downshift and Base Web. Downshift is a low-level component offering powerful behaviors that you can use to build your own UI widgets, etc. Base Web looks more like a set of ready-to-use UI widgets. You use it because you specifically want a button that's styled and works the Uber Base Web way. Uber wants all of their buttons to look consistent, so obviously Base Web is going to have styling built into it. Maybe Base Web's button could be implemented using Downshift. If you don't want Base Web's button styling, then you're not Base Web's target audience. You're probably best off implementing your own button using Downshift too.
That's just partly true. From the Base Web website:

"Base Web is a set of reusable React components that implements the Base Web design language and can be used in two different ways:

To build an application that fully adopts the Base Web design language, you import and use Base Web components out of the box.

To build a new design system inherited from the Base, you take Base Web components and customize them through the Overrides mechanism.

If you are building an application using the Base Web design language (the first scenario), you should avoid further customization. This helps to keep the design of your application consistent and makes future upgrades easier."

Uber uses Base Web in both ways since there are some additional related design systems (historic reasons) and that's why a lot of effort was put into overrides.

Funny, I just wasted a good while trying to modify the suggestions dropdown for an input in the react-select.