Wishlist for distribution of reusable React components

There's no doubt that React has transformed the process of building user interfaces in significant ways and put focus on writing reusable components. But the distribution of these still leave much to wish for.

Here are a few thoughts and wishes of mine:

1. Transpile to plain ES5

JSX is a great thing for developer productivity and happiness, as is being able to use the language features of tomorrow with the help of Babel. But as a consumer of a component, having to deal with transpiling individual dependencies and merging configurations and toolchains is a big turnoff.

Your main export should be a CommonJS module, transpiled to plain ES5, the JavaScript of today, but without bundling its dependencies, ready to be bundled with whatever build system or module loader I want to use.

2. Build a universal minified version

Taking #1 a step further, consider the developer who is using React as a replacement for jQuery and its plugin ecosystem, rather than a tool for building rich single page applications.

For them, you should also export a transpiled and minified version, bundling all dependencies, wrapped in a Universal Module Definition.

3. Inline critical functional styles

I am considering functional styles here, and the amount of these should be minimal - the rules that your component would not work without.

As a component consumer, I don't want to have to include yet another stylesheet to make the component work at its most basic level.

4. Compile non-critical styles

But some components might need to include more styling than the bare functional essentials, to provide out-of-the-box value and perhaps more than one theme.

Great, but compile it from whatever raw source you may have into CSS, the language that browsers can understand. Echoing #1, I don't want to have to learn about your tooling or configurations - just give me something that works.

5. Provide raw style sources

To allow consumers of your component to make custom builds of the styles, for example compiling with autoprefixing for specific browser versions, you should also distribute the raw style sources.

6. Don't include images

In a discussion about this topic on Twitter, Andrey Kuzmin asked what do about bundling images. Although there might be a few valid usecases for doing this, in general, I would say: if you are trying to distribute images alongside your component, you are doing something wrong.

When in real need, use inline SVGs as bundled components.

7. Distribute via npm

Sure, there are a few other package managers out there for JavaScript, but nothing compares to npm. With their continued efforts to creating a feature-rich ecosystem for public, private and scoped JavaScript modules, it should be your number one choice when hitting "Publish".

I'm not saying that you shouldn't also push to Bower, jspm or as a Ruby gem - but all that is secondary to getting the component on npm.


This has been a non-exhaustive list of how I wish React components were distributed, written because of frustration of the current situation.

If you want to read more about this topic, check out David Clark's article on creating an accessible menu button, or read another interesting discussion on how to handle transpiling and distribution.

As always, I'm eager to hear what you think about the topic: What could be added to this list? Did I get anything wrong? Hit me up on Twitter.