Front-End Insights

How to create a React component to publish on NPM?


After writing my post about role-based authorization using react-router I decided to implement the whole solution as a standalone component and publish it on NPM. To do so, I had to learn several new things about creating and testing such components. I also published to NPM for the first time. This is why I think it’s good to share my experience on the subject with you and show you how to create a React component to publish on NPM!

Creating a project for the component

The first thing you will be faced with is how to start, what structure the project should have and what the expected result should be.

Actually, I did know what to expect 😉 The React component. And this resulting component code should be written in plain ES5 so that it can be usable even in projects where ES6 is not used. That’s why I knew that I had to use webpack and babel to achieve these goals.

The next thing is testing – this is crucial if I want to publish the component on NPM and hundreds of thousands of developers could potentially use it in their projects… 😉

So, what did I do? Well, as usual before starting building a project from scratch, I decided to check if there is a generator for Yeoman which will fulfill my needs! Luckily there is, so to start the project, I only had to do:

npm install -g generator-react-webpack-component
yo react-webpack-component

The code generated by this generator is ready for creating visual components. That’s why it has the NPM script which runs webpack-dev-server. This is nice and might be useful if you plan to create such components.

Unfortunately, this generator is quite old and is missing some NPM packages. To fix this, let’s install them before we move on:

npm install --save-dev node-sass phantomjs

If you look at the structure of the project, you can find the lib folder inside. This is the place for your component. Apart from the component’s code, you can also find the index.js file in it. This will be the entry point of your package.

Let’s see the content of this file:

module.exports = require('./react-component-npm.jsx');

and in the react-component-npm.jsx we have content like below:

import React from 'react';
import './react-component-npm.scss';

export default React.createClass({
  render: function() {
    return <div className="react-component-npm">Hello World</div>;

As you can see, we have a weird mix of ES6 (imports) and standard ES5 react class code. Fortunately, nothing prevents you from rewriting this code to ES6, but I won’t show you how to do this today as this is not the subject of this article.

Testing the component

Ok, when we have the project structure ready, we can start testing our component. We have two ways to do it. The first is to write unit tests. The generator we used in the previous paragraph provides us with this capability out of the box!

All the tests are stored in the spec directory of the project. If you take a look at the react-component-npm.spec.jsx file you will see something like below:

import React from 'react/addons';
import ReactComponentNpm from '../lib/react-component-npm.jsx';

describe('ReactComponentNpm', function() {
  var component;

  beforeEach(function() {
    component = React.addons.TestUtils.renderIntoDocument(

  it('should render', function() {

As you can see, it’s a simple test which checks if the component’s DOM node contains the className attribute and that it’s set to react-component-npm.

A project generated using the mentioned yeoman generator uses Jasmine and Karma to run these test. There are two commands available to do that. One to run all test suites only once:

npm run test

and one to run them and watch for changes:

npm run watch-test

I think this is all you need to know about unit testing the component. The second option is to test it functionally as an NPM package. But before we start, let’s make a few changes to the configuration…

First of all, if we look at the webpack configuration file (webpack.config in the root folder of the project) we can see that the output file is named react-component-npm.js. I think that it’s good practice to rename it to index.js as it is the entry point to our library. The second thing is the output path. Let’s change it to /dist:

output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js',
    libraryTarget: 'umd',
    library: 'ReactComponentNpm'

You can also change the library name here, if you like. Now, after running:

npm run build

the webpack bundle will be emitted to the dist/index.js file.

Now, let’s move to the package.json file. What we have to do here, before we publish it to NPM, is to set the main option to dist/index.js. By doing this we tell NPM that this is the entry point of our library. When someone imports our component in their project it will use this file.

Ok, when we have done all this, we can publish our package locally to test it in some other React project. This is really easy – just run the below command in the root folder of the project:

npm pack

This will create the react-component-npm-1.0.0.tgz file in the root folder of the project. Please note the name of the file. It looks into the package.json file and concatenates values of the name and the version properties. So, if you would like to change the name of the package, this is the right place to do it.

Ok, now that we have our package, we can install it in some other React project in which we will test our library. To do this, inside the root folder of this project, just run:

npm install /path/to/your/package/react-component-npm-1.0.0.tgz

When you look in the package.json file of this project, you will find the below entry in the dependencies section:

"react-component-npm": "file:///path/to/your/package/react-component-npm/react-component-npm-1.0.0.tgz"

So now your NPM package is installed in another project. You can check it and test how it works in other people projects.

Publishing to NPM

Ok, so we have our component package created and well tested. This is the time to just publish it to Node Package Manager. This needs several actions…

To publish to NPM you have to have your author info set up. To do so, you should invoke the below commands:

npm set "Your Name"
npm set ""
npm set ""

npm adduser

The next thing is to install the pakmanager globally:

npm install -g pakmanager

When this is done, check if your package has any missing dependencies:

pakmanager deps

If it shows you any deps, please install them (or just add them to the package.json file).

Now it’s time to publish your package. In the root folder of your component’s library project, just run:

npm publish ./

Ok, that’s it – you can now search for your component’s package on It should now be available there 😉


As you can see, the process of creating and publishing of the React component library is not so hard. If you created a nice and useful component in your project, I encourage you to share it with the community by publishing it as a library in NPM. This will be great for you and for the community!

Related Post

I recommend Nozbe

Simply Get Everything Done

Get your tasks and projects done thanks to Nozbe system and apps for the Mac, Windows, Linux, Android, iPad and iPhone.

If you want to know more about Nozbe and its capabilities, please take a look at my article about this great application.