Building a React component as an NPM module
It’s easier than you think
You can view the whole source code at https://github.com/recraftstudio/dummy-react-npm-module
React is a great way to write reusable components which we can use to create complex UI. NPM provides a great way to write reusable modules and publish them online so they can be used by millions of developers from all around the world.
So why don’t use these two to write and publish React components so other developers can simply install and use our components.
Let’s start by creating a directory
Our next step will be converting this component to an npm module. We can do that by using
npm init command inside our directory
The NPM will ask you some questions about your package answer them and you are ready to go.
Note: Make sure your npm package name is unique and there is no module with exactly the same as yours.
Let’s jump on to install
yarn add @babel/cli @babel/core --dev
After adding the core packages let’s install presets which will actually convert our code to ES5. We need two presets
yarn add @babel/preset-env @babel/preset-react --dev
@babel/preset-env will help us to convert our code into ES5 and
We also have to tell babel to use these presets by creating a
Now let’s add these presets to our file
"presets": ["@babel/preset-react", "@babel/preset-env"]
Our next step will be defining a build command to our npm scripts so we can actually build our component and use it with other projects.
And by building I mean transipling our React code into ES5 equivalent. The problem is we don’t have any react code yet. Let’s write some
Create a directory
src and inside
src create an
Now we are all set to convert this code to ES5. In your terminal type
cd .. // make sure you are in the root folder of your project./node_modules/.bin/babel src --out-file index.js
This will create a file
index.js in your project root folder which will appear something like this
This is the transpiled ES5 source code of your component.
Let’s add this build command to our
package.json so we don’t have to type it again and again
Now whenever we want to transpile our component we can simply write
We are also missing one pair of dependency and those are our core libraries
But we are not directly going to install them as
dependencies rather we will define them as our
What are peerDependencies?
peerDependencies will tell the npm that our package needs the dependencies listed as
peerDependencies installed in the host project which will be using our npm module.
In our case those
peerDependencies will be
react-dom because if user has to use our React component it’s obvious they already have both of these libraries installed inside their project.
Let’s define them. Inside your
package.json add a new field
react-dom inside it.
We will also install
react-dom as our
devDependencies as we want them to use while development
yarn add react react-dom --dev
With all said and being done it’s now time to test our component. In order to do that we will be installing our local npm module inside our other project.
Inside your project type ( make sure you are inside the root directory of your project )
This will give you the path of your current working directory
In my case path was
Keep this path noted we will be using this to install our component to another project.
Let’s create a dummy React project.
cd .. // if you still in your component root directory
npx create-react-app dummy-app
yarn add /Users/manojsinghnegi/Projects/dummy-react-npm-module
Remember to replace npm module path with your system path. Once installed start your project server by typing
And then inside
App.js use our newly created
And the output will be something like this
React & NPM both are great tools used together we give birth to a whole new world of reusable React components. Write as much reusable code you can and if there is a chance to convert that code to a module share it with the world using NPM.
This is it for this post. In the next article, we will be learning how to publish an NPM module to npm registry.
keep sharing. 😃
I am available to give a public talk or for a meetup hit me up at firstname.lastname@example.org 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.
Here are more articles for you.
- React Context API Explained
- Introduction to Haskell Ranges
- HOC ( Higher-order components ) in ReactJS explained