How I make my first NPM package for React

In this post, I am going to demonstrate how I develop and publish my first npm package.

My current project has a blog section. This blog section has the same features that a traditional blog generally has. However, if you ever visit any blog, you would see that for a lengthy text (comment, reply, post body), full text is not shown, instead some text is visible and rest of the text is visible after clicking read more button. Again you can hide that text by clicking the read less button. So, when I was developing such read more/less toggle, I felt necessity of a package by which I can easily implement this toggle.

Options

In the first version of this package, user will be able to change button text color and background color. Also user will define the content and the length of the text which will be shown.

Initialize Git

I create a folder and name it as read-more-less-toggle. Then initialize git in the folder,

Building Package

Inside read-more-less-toggle, a package.json file is created to handle dependencies,

package.json

Now time to install dependencies,

Create a file for webpack to bundle up application,

webpack.config.js

src folder in root directory is used for containing application’s main files, inside src folder, create a file ReadMoreLess.js, which is basically the main responsible component,

Create .babelrc file in the root directory,

Hey, we have completed the coding part.

It is time to build the awesome package,

And then, I push it to github,

Publishing Package

As this is my first time in making npm package, so I have signed up here. After signing up, I add user in the terminal,

I just have added my npm user in terminal.

Publishing time!!

Hurray! I have just published my first npm package.

Testing

Lets test this package with hello world (Simple App) react app.

Install Node & NPM

create-react-app

Hello World App

If you face permission issue of npm, change permission

Now install our awesome read-more-less-toggle,

Update index.js file,

len is how much will be displayed at first.
content contains the text.
btnColor is color of button(Optional).
backgroundColor is background color of button (Optional).

Here is our simple read-more-less-toggle package for React.

We are done. If you like this article, make sure to follow my Medium profile and check out some other articles of mine!

Don’t forget to press 👏 as much as you can so that others can reach it.

Software Engineer | Professional Scrum Master | Research Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store