How to create and publish your own React Component on NPM

Have you at any point of time pondered about composing your own package and distributing it to NPM?

Creating and publishing your own npm package with the open-source community is a great way to demonstrate your development skills.

I recently went through the process of publishing a React component to npm. So, I thought to give a point by point and complete guide on the most proficient method to make and distribute React Components on npm.

We’ll go through the following sections in this post:-

1. Creating and setting up the project

2. Testing the package locally

3. Writing proper documentation

4. Publishing the package

You can find the project code used in the article at https://github.com/927tanmay/otp-timer. The respective npm package is published at https://www.npmjs.com/package/otp-timer.

If you don’t want to manually set-up the project, you can clone the repository and use it as a boilerplate for your React Component package.

Creating and setting up the project:

Our package is named otp-timer. Execute the following commands in your terminal to make the respective folders. (you can name your project folder accordingly)

# Creating a folder named otp-timer
$ mkdir otp-timer
# Navigating into the folder
$ cd otp-timer
# Creating the folders inside otp-timer
/otp-timer$ mkdir lib
/otp-timer$ mkdir src
/otp-timer$ mkdir example

After this, we need to create the package.json to your package to make it easy for others to manage and install.

You can create a package.json file either by running npm init command or creating a default package.json file.

# Creating a package.json file
/otp-timer$ npm init

You can use the following package.json file. It consists of all the dependencies that are needed to make the React component ready for publishing. Add the following dependencies in your file and install (npm install) it.

Note: You need to change the name, version, description, author information according to your React component.

In the code below:-

• “name”: This represents the name of the npm package. The name must be lowercase, one word and may contain hyphens and underscores.
• “version”: Must be in form x.x.x (the first version can be 1.0.0)
• “main”: This is the main file that is exported as a package to npm. This is the converted ES5 code of your React Component in the src folder.
• “peerDependencies”: Having a peer dependency means that your package needs a dependency that is the same exact dependency as the person installing your package. Mainly used when publishing a package.

.babelrc

Babel is used for converting our React component code into ES5. This defines the presets used by Babel. Here the question arises, Why? React components are mostly written in modern JavaScript syntax. But browsers don’t understand JSX, thus we need a transformation.

• babel preset env for compiling modern Javascript down to ES5
• babel preset react for compiling JSX and other stuff down to Javascript

Create a file “.babelrc” and add the following code.

/otp-timer$ touch .babelrc
{
"presets": [
[
"@babel/preset-env"
],
"@babel/preset-react"
],
"plugins": [ ]
}

To read more about babel, you can refer to A Complete Webpack Setup for React — The Startup.

Great, now you are completely ready to create your React component in the src folder.

Create a file in the src folder “touch timer.js”.

/otp-timer$ cd src
/otp-timer/src$ touch timer.js

For example, I have included my otp-timer package code. You can replace it with your React Component code that you want to publish as an npm package.

Run

• “npm install” to install all the dependencies for the project
• “npm run build”: this will convert the React component code in ES5. You can view the ES5 code in the lib folder.

Congrats, you are good to go up with the code.

Testing the package locally:

Before publishing the package on npm you must make sure that your package works as expected. To test the package locally :

Run sudo npm link in the current project i.e. otp-timer.

/otp-timer$ sudo npm link

npm link empowers us to build up our modules and test them in our tasks flawlessly — all locally!

This is finished by making our module project look like any other module in the node_modules directory.

npm link does this by creating a symbolic link between the local module and the main project’s node_modules.

Afterwards, you need to create a project where you want to include your package. For example, you want to use the otp-timer in “my-firstProject” react-application.

Run npm link otp-timer in the current directory (my-firstProject) to link the package locally.

/my-firstProject$ npm link otp-timer

Here, you can include the otp-timer package in your project as follows:

import React, { Component } from "react";
import OtpTimer from 'otp-timer';
export default class Example extends Component {
handleSubmit() {
console.log("button clicked");
}
render() {
return (
<div>
<OtpTimer seconds= {6} minutes={0} resend={this.handleSubmit} />
</div>
);}}

You must then start your project and confirm whether the otp-timer package works correctly or not.

Note: After making any corrections in the package, you must execute: npm run build before testing the package.

Writing the proper Documentation:

Before publishing the package in npm we must include detailed documentation specifically containing the following information :

• What the package actually used for(this may include a working demo of the package)?
• How to use the package?
• The optional and required props that can be passed to the package.
• Include the proper possible keywords for the package in the package.json file(keywords would help the other developers in finding your package)

You can use https://dillinger.io/, https://pandao.github.io/editor.md/en.html, etc. to make an appealing README.md

Publishing the package:

You must first create your account on npm by going on their official website (https://www.npmjs.com/).

If you already have an npm account, then you must first log in to your account by running npm login in the terminal and then enter the username, password and your email address.

After logging into your account from CLI, run npm publish in the otp-timer folder.

/otp-timer$ npm login
#Enter the username, password and your email address
/otp-timer$ npm publish

Congrats, you have published your npm package successfully. You can view your package at https://www.npmjs.com/package/[your package name].

Note: Your package name must be unique. NPM doesn’t allow duplicate names in publishing the packages.

Updating the package: To update the package you need to update the version number in the package.json and then run npm publish.

So here we come to an end of creating our react component on npm. I encourage you all to buckle up to build one such component by yourself and explore more about it.

If you have any further queries or remarks, it would be great if you let me know in the space below. Moreover, if you found this blog helpful, please like and share!

Happy coding!