The Idiot’s Guide to Publishing a React Component to NPM

Edit (2017–02–10): This article is kind of outdated. I now have a custom package that compiles UMD and CommonJS modules. Check out an example of that here. That being said, the instructions in this article might work for you anyhow!

This was not as trivial as I was hoping it was, but I finally did it. I made a very simple component that I thought was relatively cool and wanted to share it with the world. You can see its effect here in this gif:

That’s all it does, it’s super simple.

Check it out here and leave me a star if you think it’s cool!

So I went looking and found a bunch of articles telling me what to do, but since I used Brunch as a build tool, almost none of them applied to me. I wanted someone to hold my hand and I almost found it.

Enter JedWatson and the generator-react-component. Trust me, this is going to make your life a LOT easier.

The Helpful Generator

The first thing I would do is to install Yeoman and Gulp if you haven’t already. Then it’s a simple matter of installing the generator:

npm install -g generator-react-component

And then running it to create a skeleton project:

yo react-component

Go to the generator’s project page for more information, but there will be a few prompts that will guide you to creating your project.

After that’s done, you’re pretty much 90% of the way there.

Developing Your Package

Immediately, you can run:

npm start

To fire up a server where you can see a page with your component being rendered. Simply go to localhost:8000 in your browser to see the page. That’s your live demo / example page right there! All out of the box.

Now it’s time to actually write your component. Look inside the src directory in your project folder. In here, you can use any manner of JSX and ES6 goodies to craft your creation as long as it has the js file extension.

The best part is that every change you save to the files in this folder will update automatically. That means all you have to do is to save your file, and alt-tab your way to the browser to see your changes update automagically.

Releasing Your Package

As if it wasn’t easy enough already, releasing your package is even easier. The README.md file is already written up and all you have to do is fill in the blanks.

You may also want to run additional Gulp build tasks if there are extra fancy things you want to do. You can easily do that in gulfile.js and the generated file even tells you where to run your gulp tasks.

Once everything is ready, make sure your github repo (as named in your package.json) already exists and type the following into the command line in order to build and publish:

npm run build
npm run release

And you’re done! That’s all.

Not only do you now have a package published to NPM, you also have a webpage hosted on github pages with the live demo that you can share with your friends.

In addition, there are other npm scripts included in the generated package.json that allow you to lint your code, publish your site, and do other handy things.

Done

Wasn’t that easy? Let me know about the cool things that you’ve done and maybe we can all share some github stars with each other!

At this point, I’m supposed to tell you to hit that little heart at the bottom because apparently the chances of you doing so are increased with an explicit statement. So if you found this useful at all, hit the heart there below!

Thanks!