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.
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.
I create a folder and name it as read-more-less-toggle. Then initialize git in the folder,
mkdir read-more-less-togglecd read-more-less-togglegit initgit remote add origin https://github.com/mrron313/read-more-less-toggle.git
Inside read-more-less-toggle, a package.json file is created to handle dependencies,
Now time to install dependencies,
Create a file for webpack to bundle up application,
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,
"presets": ["@babel/preset-react", "@babel/preset-env"]
Hey, we have completed the coding part.
It is time to build the awesome package,
npm run build
And then, I push it to github,
git add .git commit —m “Initial Commit"git push -u origin master
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,
npm addusernpm login
I just have added my npm user in terminal.
Hurray! I have just published my first npm package.
Lets test this package with hello world (Simple App) react app.
Install Node & NPM
curl -sL https://deb.nodesource.com/setup_8.x | sudo bash -sudo apt-get install -y nodejssudo npm install npm@latest -g // Update NPM
npm install -g create-react-app
Hello World App
create-react-app my-appcd my-appnpm i
If you face permission issue of npm, change permission
sudo chown -R $(whoami) .npm
Now install our awesome read-more-less-toggle,
npm i 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.