Publish Your Own React Component as Npm Package Under 5 Minutes

Let’s say you‘re working on the project of your own. You are desperately trying to solve some problem. You are looking on the internet for help. But you can’t find it. The last option is to solve the problem by yourself. You end up writing complex solution. With potential to also help others facing similar problem. But how to show the world what you’ve done? Continue reading and you’re gonna find out!

In this article you’re gonna learn how to write and publish your own React component as npm package. You will learn:

  • How to write and test the component during development stage
  • How to publish component when it’s ready

Setting up environment

All we need for the start is empty folder. Name it as you wish. Be as creative as you like. Now we’re gonna run series of commands. First npm init . You will end up in interactive console. Just keep pressing ENTER until it disappears. Now install dependencies

npm install --save react webpack 

Well what to say. We are writing React component. We will probably need React for that. And we need webpack to transpile ES6 and JSX back to plain Javascript.

Now install dev dependencies

npm install -D babel-cli babel-core babel-loader babel-plugin-transform-object-rest-spread babel-plugin-transform-react-jsx babel-preset-env webpack-cli

So what is the difference. When someone will actually try to use our component. He will run npm install <package_name> . What happens is that dependencies will be installed. But dev dependencies will not be installed.

Now that dependencies are installed we need to change package.json a little. We need to:

  • set up React as peer dependency
  • Provide build and start script
  • Set entry point to build/index.js

Now we need two files that will configure webpack to transpile our code. These files will be located in project directory.

Now is the time for a little coding. Finally…

Create src directory and inside it create file index.js. This will be entry point for the webpack. Hence our component will be located in this file. In this example we’re gonna write very simple component. It will be a simple square with background color, width, height and text inside. These variables can be set as component props. If some prop won’t be set we set it do default value. Here is how the component will look like.

Now run npm start and check if there are any errors. There should be none. Now it would be nice to actually test if the component can be used as npm package before we publish it. Open package.json and specify name of the package. Since the is opened it would be nice to also set author and git repo. You can sign up for npm account here. And don’t worry it is free.

Testing the package

Okay… We have the package. Now is the time to test it. Inside project directory run npm run build. This will build our component. Then run npm link. This will link the package to npm dependencies. Basically it means we will be able to use it in other project but only on our computer. Now open any React project and before starting it run npm link <package_name>. Now you should be able to start the project and import the package as any other package. Here is my example

Now if you are not satisfied jump back to the component project do some changes. Run npm run build and you can immediately test it.

Publishing the package

Satisfied and ready to publish? Well if you didn’t sign up for an account yet do that here. Then inside component project directory run npm login and sign in with your credentials. After that run npm publish. And that’s it now the component is public and available for others.

Conclusion

In this article we’ve learned how to:

  • set up project for writing React components as npm package
  • test the package locally
  • publish the package

That’s it. And I believe we have still couple of seconds left. If you likes the story let the world know by clapping. If you have any questions feel free to ask me. I’ll gladly answer any questions. Links to examples are down below. Until next time.

NOTE: It would be awesome to describe the package for other users. Provide some README and example how to use the package. Make it as simple to use as possible. You can use examples below as inspiration.