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

Subscribe to my newsletter and never miss my upcoming articles

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.

Well known packages

Here are some that most of us are aware of,

  • lodash: The magical package makes all impossible possible by exposing many useful methods on JavaScript arrays, objects and other data structures.
  • Prop-types: If you are on a react project, you need this for runtime type checking of React props and similar objects.
  • chalk: If you are doing(or planning to) something with node CLI(command line interface), you can not miss chalk. Here is an article can help you understanding the usage along with few more related packages like, Figlet, Inquirer.
  • express: Undoubtedly, a great web framework for node.
  • eslint: It is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code similarly as what JSLink and JSHint is for.
  • moment: If you are doing something with date-time, moment is probably added into the package.json file.
  • date-fns: If not moment, another alternative could be date-fns. It is my personal favorite.
  • nodemon: It helps node.js based applications by automatically restarting the node application when file changes in the directory are detected. So useful!

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.

10 useful packages

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.

🌈 randomcolor

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.

ß· react-loader-spinner

react-spinner-loader provides simple React SVG spinner component which can be implemented for loading operation before data fetched into the view.

🔢 shortid

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.

📈 recharts

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>
    
  • Demo: https://recharts.org/en-US/examples
  • Know more: https://www.npmjs.com/package/recharts

💲 react-currency-format

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 $).

👀 pluralize

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.

  • Usage
    var pluralize = require('pluralize');
    pluralize('test') //=> "tests"
    pluralize('test', 1) //=> "test"
    pluralize('test', 5) //=> "tests"
    pluralize('蘋果', 2, true) //=> "2 蘋果"
    
  • Know more: https://www.npmjs.com/package/pluralize

⚔️ cross-env

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.

📧 nodemailer

Send e-mails from Node.js, as simple as that! Here is a step-by-step guide on how to use it.

🔑 bcrypt

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.
      });
    });
    
  • Know more: https://www.npmjs.com/package/bcrypt

✔️ validator

A library of string validators and sanitizers.

What are your favorites?

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.

Arpendu Kumar Garai's photo

Great !! I have used most of them and got to know some more.

Here are the ones which I have used or came across:

Tapas Adhikary's photo

Arpendu Kumar Garai,

Super list! Thanks for sharing..

Bolaji Ayodeji's photo

This is such an amazing list Tapas, sharing right away! 🤩

Tapas Adhikary's photo

Thanks Bolaji Ayodeji! Much appreciate..

Tellarin's photo

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.

Tapas Adhikary's photo

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! 😃

Luiz Filipe da Silva's photo

Really useful! Thanks for sharing this amazing list!

Santosh Giridhara's photo

Thank you Tapas Adhikary for sharing the list of npm packages.

Here are few which I have used: