Publishing a React Component as an NPM module

Here we go

In the previous article, I wrote about converting our react component into a npm module today we will be going through the process of publishing that component to npm registry.

If you haven’t read my previous article on Building a React component as an NPM module go check it out.

Building a React component as a NPM module

Let’s pick up where we left off here you can find the code we have written so far https://github.com/recraftstudio/dummy-react-npm-module

Readme.md

Let’s add a readme.md file to our package. A readme file is very important for your NPM module as it will be the first thing people will see when they visit your component. A good readme file with good documentation will help other developers to get easily started using your npm module.

Inside your project root directory. Open up a terminal and type

touch readme.md

Now open readme.md inside your editor and paste

If you like replace it with your own description about the components you are trying to publish. For inspiration or examples of good readme browse popular npm packages.

Now we are all set to publish our npm module. Firstly push all of your code to github.

Now inside your root project in the terminal type

npm adduser

then npm will ask for your username, password, and email if you don’t have an account with npm go create one first.

After above command user npm login command so you will be logged in to npm

npm login

It will again ask for your account information provide it and after that, we are good to go.

To publish your npm module just type

npm publish

and you just published your first npm module 😃

Now to use this component on any other project you just have to type

npm install --save <name-of-your-component>

or if you are following the article all along from the first part

npm install --save dummy-react-npm-module

To verify if our component is published or not just go to

https://www.npmjs.com/package/<your-package-name>

In our case it would be

https://www.npmjs.com/package/dummy-react-npm-module

If you are interested in Building a React component as an NPM module checkout the first part.

Here are more articles for you.

So I Built my own React Native Button

Building a React component as a NPM module

Introduction to Haskell Ranges

Speed learning javascript

Hi, My name is Manoj Singh Negi. I am a Javascript Developer and writer follow me at Twitter or Github.

I am available to give a public talk or for a meetup hit me up at justanothermanoj@gmail.com if you want to meet me.

Really loved this article ?

Please subscribe to my blog. You will receive articles like this one directly in your Inbox frequently.

Peace.