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.

• Usage:

   let randomColor = require('randomcolor');
   const COLOR_ARRAY = randomColor({
      count: 25,
      luminosity: 'bright',
      hue: 'random'
   });
  
   // Now you have an array of 25 random color.
  

• Demo: https://randomcolor.lllllllllllllllll.com/
• Know more: https://www.npmjs.com/package/randomcolor

߷ 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.

• Usage:

  import Loader from 'react-loader-spinner'
  export default function App (){
  //other logic
    return() (
     return(
      <Loader
           type="ThreeDots"
           color="#00BFFF"
           height={100}
           width={100}
      />
     );
    )
  }
  

• Demo: https://mhnpd.github.io/react-loader-spinner/
• Know more: https://www.npmjs.com/package/react-loader-spinner

🔢 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.

• Usage

   import shortid from "shortid";
  
   <Demo key={shortid.generate()}/>
  

• Know more: https://www.npmjs.com/package/shortid

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

• Usage

   import CurrencyFormat from 'react-currency-format';
  
   <CurrencyFormat 
         value={2456981} 
         displayType={'text'} 
         thousandSeparator={true} 
         prefix={'$'} 
         renderText={value => <div>{value}</div>} />
  

• Know more: https://github.com/mohitgupta8888/react-currency-format#readme

👀 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.

• Usage: Just install it using npm i or yarn add commands
• Know more: https://www.npmjs.com/package/cross-env

📧 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.

• Usage

   import validator from 'validator';
   validator.isEmail('foo@bar.com'); //=> true
  

• Know more: https://www.npmjs.com/package/validator

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.