{"id":300598,"date":"2020-01-16T14:49:35","date_gmt":"2020-01-16T21:49:35","guid":{"rendered":"https:\/\/css-tricks.com\/?p=300598"},"modified":"2020-01-16T14:49:35","modified_gmt":"2020-01-16T21:49:35","slug":"third-party-components-at-their-best","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/third-party-components-at-their-best\/","title":{"rendered":"Third-Party Components at Their Best"},"content":{"rendered":"

I’m a fan of the componentization of the web. I think it’s a very nice way to build a website at just about any scale (except, perhaps, the absolute most basic). There are no shortage of opinions about what makes a good component, but say we scope that to third-party for a moment. That is, components that you just use<\/em>, rather than components that you build yourself as part of your site’s unique setup. <\/p>\n

What makes a third-party component good? My favorite attribute of a third-party component is when it takes something hard and makes it easy. Particularly things that recognize and properly handle nuances, or things that you might not even know enough about<\/em> to get right. <\/p>\n

<\/p>\n

Perhaps you use some component that does pop-up contextual menus for you. It might perform browser edge detection, such as ensuring the menu never appears cut off or off-screen. That’s a tricky little bit of programming that you might not get right if you did it yourself — or even forget to do.<\/p>\n

I think of the <Link \/><\/code> component that React Router has or what’s used on Gatsby sites. It automatically injects aria-current=\"page\"<\/code> for you on the links when you’re on that page. You can and probably should use that for a styling hook! And you probably would have forgotten to program that if you were handling your own links.<\/p>\n

In that same vein, Reach UI Tabs<\/a> have rigorous accessibility baked into them that you probably wouldn’t get right if you hand-rolled them. This React image component<\/a> does all sorts of stuff that is relatively difficult to pull off with images, like the complex responsive images syntax, lazy loading, placeholders, etc. This is, in a sense, handing you best practices for “free.”<\/p>\n

Here’s a table library<\/a> that doesn’t even touch UI for you, and instead focuses on other needs you’re likely to have with tables, which is another fascinating approach. <\/p>\n

Anyway! Here’s what y’all said when I was asking about this<\/a>. What makes a third-party component awesome? What do the best of them do?<\/strong> (besides the obvious, like good docs and good accessibility)? Some of these might be at-odds. I’m just listing what people said<\/em> they like. <\/p>\n