# 10 useful NPM packages you should be aware of (2020 edition) 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 ](https://www.npmjs.com/) 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](https://lodash.com/docs): The magical package makes all impossible possible by exposing many useful methods on JavaScript arrays, objects and other data structures. - [Prop-types](https://www.npmjs.com/package/prop-types): If you are on a react project, you need this for runtime type checking of React props and similar objects. - [chalk](https://www.npmjs.com/package/chalk): If you are doing(or planning to) something with node CLI(command line interface), you can not miss chalk. [Here is an article](https://blog.greenroots.info/a-step-by-step-guide-to-your-first-clicommand-line-interface-app-using-nodejs-cjvm6woau000mkvs1sd8u3qxm) can help you understanding the usage along with few more related packages like, [Figlet](https://github.com/patorjk/figlet.js), [Inquirer](https://github.com/SBoudrias/Inquirer.js). - [express](https://www.npmjs.com/package/express): Undoubtedly, a great web framework for node. - [eslint](https://www.npmjs.com/package/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](https://momentjs.com/): If you are doing something with date-time, moment is probably added into the package.json file. - [date-fns](https://date-fns.org/): If not moment, another alternative could be date-fns. It is my personal favorite. - [nodemon](https://www.npmjs.com/package/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](https://www.npmjs.com/package/react), [angular](https://www.npmjs.com/package/@angular/core), [vue](https://www.npmjs.com/package/vue) etc as they are omnipresent. [Here is the list](https://www.npmjs.com/browse/depended) of most depended upon packages mentioned in [npmjs.com](https://www.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: ```js 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/](https://randomcolor.lllllllllllllllll.com/) - Know more: [https://www.npmjs.com/package/randomcolor](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: ```js import Loader from 'react-loader-spinner' export default function App (){ //other logic return() ( return( ); ) } ``` - Demo: [https://mhnpd.github.io/react-loader-spinner/](https://mhnpd.github.io/react-loader-spinner/) - Know more: [https://www.npmjs.com/package/react-loader-spinner](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 ```js import shortid from "shortid"; ``` - Know more: [https://www.npmjs.com/package/shortid](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 ```js } /> ``` - Demo: [https://recharts.org/en-US/examples](https://recharts.org/en-US/examples) - Know more: [https://www.npmjs.com/package/recharts](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 ```js import CurrencyFormat from 'react-currency-format';
{value}
} /> ``` - Know more: [https://github.com/mohitgupta8888/react-currency-format#readme](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 ```js 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](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](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](https://blog.greenroots.info/send-and-schedule-e-mails-from-a-nodejs-app-ck0l6usms000v4ns1lft6lauw) on how to use it. ## 🔑 bcrypt A library to help you hash passwords. This is so very powerful with various options provided. - Usage ```js 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](https://www.npmjs.com/package/bcrypt) ## ✔️ validator A library of string validators and sanitizers. - Usage ```js import validator from 'validator'; validator.isEmail('foo@bar.com'); //=> true ``` - Know more: [https://www.npmjs.com/package/validator](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](https://twitter.com/tapasadhikary).