10 useful NPM packages you should be aware of
By: Harsh Patel
Tags: Nodejs, Backend Development, Front End Development, NPM, Programming

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.

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.

let randomColor = require('randomcolor');

const COLOR_ARRAY = randomColor({

count: 25,

luminosity: 'bright',

hue: 'random'

});



// Now you have an array of 25 random color.

߷ react-loader-spinner

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

import Loader from 'react-loader-spinner'

export default function App (){

//other logic

return() (

return(

<Loader

type="ThreeDots"

color="#00BFFF"

height={100}

width={100}

/>

);

)

}

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

import shortid from "shortid";



<Demo key={shortid.generate()}/>

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

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

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

import CurrencyFormat from 'react-currency-format';



<CurrencyFormat

value={2456981}

displayType={'text'}

thousandSeparator={true}

prefix={'$'}

renderText={value => <div>{value}</div>} />

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

var pluralize = require('pluralize');

pluralize('test') //=> "tests"

pluralize('test', 1) //=> "test"

pluralize('test', 5) //=> "tests"

pluralize('蘋果', 2, true) //=> "2 蘋果"

⚔️ 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

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

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.

});

});

✔️ validator

A library of string validators and sanitizers.

import validator from 'validator';

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

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.

Thanks for reading ❤

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!