The Value of Good Third-Party Components

Components are a natural way to structure a website, and the appeal is obvious when you bring in third-party ones that you just use rather than build yourself. The best of them take something genuinely hard and make it easy—particularly handling nuances you might not even know exist.

A pop-up menu component that performs edge detection so it never renders off-screen is a perfect example. That is fiddly logic many developers would forget to write on their own, but a good component quietly handles it for you. The same goes for accessible behavior that is easy to get wrong from scratch.

Consider the <Link /> component from React Router (also used on Gatsby sites). It automatically injects aria-current="page" on links when you are on that page—a useful styling hook you would likely forget to implement manually.

Reach UI Tabs build in similarly rigorous accessibility. This React image component hands you best practices for free, covering complex responsive image syntax, lazy loading and placeholders. Another interesting approach is a table library that deliberately skips UI entirely and instead focuses on the data-handling needs you are likely to have.

What Developers Actually Look For

When the question was posed on Twitter—what makes a third-party component awesome beyond obvious basics like documentation and accessibility—the answers varied widely. Some are even at odds with each other, but here is what people said they value:

  • Plug-and-play: it should “just work” with minimal config.
  • Lots of editable demos.
  • Highly configurable.
  • “White label” styling—avoid bringing too strong a design opinion.
  • Styled via regular CSS so you can bring your own styling tools.
  • Fast and small.
  • Installable via a package manager.
  • Can be manually instantiated.
  • Can be given a DOM node where it should go.
  • Follows a useful versioning scheme.
  • Maintained, particularly for security.
  • Has a public roadmap.
  • Framework-agnostic.
  • Doesn’t carry other dependencies.
  • Uses intuitive naming conventions.
  • Supports internationalization.
  • Has lots of tests.

Depending on your project, some of these matter more than others—but they paint a clear picture of what separates a merely functional component from one that feels genuinely helpful.