How to publish React component with static assets to npm?

Question

I'm developing a React component and I want to publish it to npm, but I couldn't find any best practices on how to distribute statics assets (like css and images) alongside with the component. Well, of course all sources should be transpiled to plain js and plain css. In the case of js everything is simple — user will just require it with whatever bundler he is using. But in the case of css it's tricky. I don't want to use inline styles since I want the component to be easily customizable (by css overriding). So, I guess the only way is to ask user to copy the css file from node_modules to where he needs it (or import it with SASS or any other preprocessor). But what if my css file has references to other static assets (like images, fonts, etc.)? The paths will be completely messed up I guess. So, I'm interested in what is the right way to do it? How to make it easier for the user to consume and how to avoid common pitfalls?

Answer 1

That's a really good question. I'm not sure if my answer is what you are expecting (it will be more philosophical than technical), but I think it is a good starting point.

First of all, I think there is no "right way" of doing it. Imagine a team (it can be a single person team) maintaining a package, the way they name things is the way that makes sense to them, and that is the "right way". So, there is no "standard" for naming things, name things the way you think that is correct and you are good to go.

Now, IMHO, people who will use your package should worry about how to use it, not you. Since the person may make choices about what it want to use or not from your package, and how they want to use it.

For example, if using webpack, we are able to use url-loader, which will resolve the urls problem to us.

If not using webpack, then what you can do is provide a consistent documentation about your package, and how to use it. Your users will follow this, using the tools they want. If your users want to use grep and sed in their workflow, that's ok, since they are in the control of it.

Also - now talking about CSS specifically -, if you want to provide styles that uses images, you may try to use a preprocessor or something like that, and let your user customize some variable to set the path of things. For example, imagine you will say assets-path, using SASS, your user just need to add $assets-path: '/path/to/assets/' and compile the CSS.

Whenever I'm using a package, I tend to think like "okay, there are lots of things there, I don't need to use all of them, I will use the things that I want", and if I would use your package, and I know that there will be CSS files, I would try to find a good set of tools to help me.

If you want to follow some "standard", try checking out the most popular react projects on github, but, as I said before, the way they name stuff is the way that make sense to them. It may not make sense to you! :)

Hope it helps!