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
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
- Set entry point to
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…
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.
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.
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.
react-color-square - Simple example of how to publish own react components as npm packagegithub.com