10 useful NPM packages you should be aware of (2020 edition)

Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
Search for a command to run...

Co-Founder, @CreoWis | Teacher, @tapaScript | Founder, @ReactPlay | YouTuber | Writer | Human
Thank you Tapas Adhikary for sharing the list of npm packages.
Here are few which I have used:
Great list!
I'm a bit biased here, but I'd like to recommend people check out Recognizers-Text. ;-)
It can be quite handy if you need to recognize and understand numbers/dates in different formats and in natural language.
Code is open-source on GitHub and it's also available as NuGet and PyPI packages.
Tellarin, Thank You!
A quick look into Recognizers-Text seems it is a great one. I will be using that sooner. Thanks for the recommendation.
...and do not worry about being biased here.. My entire list was out of my own bias! 😃
Great !! I have used most of them and got to know some more.
Here are the ones which I have used or came across:
Traditional SSR is great, but it has a massive buffering problem. Let's look into the SSR Streaming and learn how it could be a game changer.

Learn how to build maintainable, reusable forms in React using design patterns like custom hooks, compound components, and context for scalable CRUD

Learn how JavaScript variables work, including let vs const, primitive and reference types, pass by value, and how JavaScript stores data in memory.

A beginner-friendly introduction to JavaScript covering what it is, how it works, and how to set up your JavaScript environment

Learn how the promises are handled internally using event loop. This concept is essentials to debug and work with async programming.

GreenRoots Blog - A Blog by Tapas Adhikary
186 posts
Educator | YouTuber | Building ReactPlay | Let's Connect
The great thing about living in this era as a web developer is, you have got plenty of supports from developer communities around. One of them is, Node Package Manager(from now, npm).
If you are into any kind of(client-side, server-side, full-stack etc) web development projects, npm is an old thing to you. Npm is the world's largest Software Registry, hosting number of useful packages for developers to share and consume.
In this article, I am going to talk about my favorite npm packages that I feel, I am blessed with. Problem is, the list is very very lengthy and I have trouble in selecting top-10 from it! Hence I have decided, not to talk much about the well-known ones rather, few others that you may not know but, should be aware of. Hope you find this useful.
Here are some that most of us are aware of,
I haven't really mentioned about few more like, react, angular, vue etc as they are omnipresent. Here is the list of most depended upon packages mentioned in npmjs.com.
All that mentioned above, I have been using them so heavily. Here are others in my current top-10(not in any particular order though) good to be aware of, if not already.
A tiny script for generating attractive random colors. I have used this to plot line charts with different colors on page loads. It is very simple to use, highly configurable and extremely useful.
Usage:
let randomColor = require('randomcolor');
const COLOR_ARRAY = randomColor({
count: 25,
luminosity: 'bright',
hue: 'random'
});
// Now you have an array of 25 random color.
react-spinner-loader provides simple React SVG spinner component which can be implemented for loading operation before data fetched into the view.
Usage:
import Loader from 'react-loader-spinner'
export default function App (){
//other logic
return() (
return(
<Loader
type="ThreeDots"
color="#00BFFF"
height={100}
width={100}
/>
);
)
}
Do you remember, react unique key error? shortid can save you big time there. It creates amazingly short non-sequential url-friendly unique ids. Perfect for url shorteners, database ids, and/or any other id related usages.
Usage
import shortid from "shortid";
<Demo key={shortid.generate()}/>
A powerful chart library built with React and D3. You really can use it without understanding of the under-the-hood pieces and helps in faster implementations.
Usage
<ResponsiveContainer width='100%' height={400}>
<LineChart data={chartData}
margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
<XAxis dataKey="week" />
<YAxis />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip content={<CustomTooltip />} />
<Legend />
</LineChart>
</ResponsiveContainer>
If you are looking for a react component to format number in an input or as a text, check this one out. It helps you in currency formatting with proper prefix(like $).
Usage
import CurrencyFormat from 'react-currency-format';
<CurrencyFormat
value={2456981}
displayType={'text'}
thousandSeparator={true}
prefix={'$'}
renderText={value => <div>{value}</div>} />
Have you ever managed the string pluralizations like, 1 mango(s) or 1 cars? How about when language changes from English to something else? That's when pluralize comes in. It helps you to pluralize and singularize any words.
var pluralize = require('pluralize');
pluralize('test') //=> "tests"
pluralize('test', 1) //=> "test"
pluralize('test', 5) //=> "tests"
pluralize('蘋果', 2, true) //=> "2 蘋果"
If you had problems in running NODE_ENV=production on windows, you probably know about cross-env already. cross-env makes it easy to have a single command without worrying about setting or using the environment variable properly for the platform.
npm i or yarn add commandsSend e-mails from Node.js, as simple as that! Here is a step-by-step guide on how to use it.
A library to help you hash passwords. This is so very powerful with various options provided.
Usage
const bcrypt = require('bcrypt');
const saltRounds = 10;
const myPlaintextPassword = 'password';
// never use 'password' as password :-)
bcrypt.genSalt(saltRounds, function(err, salt) {
bcrypt.hash(myPlaintextPassword, salt, function(err, hash) {
// Do something with the hash.
});
});
A library of string validators and sanitizers.
Usage
import validator from 'validator';
validator.isEmail('foo@bar.com'); //=> true
The list doesn't end here. I am sure, you have heard of some or many from the list already. Please let me know if you have a bunch that are your favorites. Looking forward to see your list of npm packages in the comment section below.
If it was useful to you, please Like/Share so that, it reaches others as well. To get e-mail notification on my latest posts, please subscribe to my blog by hitting the Subscribe button at the top of the page. You can also follow me on twitter @tapasadhikary.