Jan 7, 2022

5 useful npm packages for react developers to increase productivity

By Ashish Patel
2 min read

Here in this blog, we'll look at the top 5 very useful npm packages that you can use to actually reduce the effort and increase productivity. These packages I personally used and found very helpful for UI development.

1. Moment.js

npm i moment

A JavaScript date library for parsing, validating, manipulating, and formatting dates. You might have struggled a lot when it comes to formatting timestamps or comparing different timestamps. Moment makes it a lot easier for you to do such stuff.

import moment from 'moment';

moment('2020-08-30T00:00+05:30').format('MMM D, YYYY'); //Aug 30, 2020
moment('2010-10-20').isAfter('2009-12-31'); // true

2. Lodash

npm i lodash

"A modern JavaScript utility library delivering modularity, performance & extras"

Loads is a utility library for JavaScript it consists of 200+ utility functions, that will make your life much easier while working with arrays, strings, objects, numbers, events etc. To give you an example just imagine a situation of an event handler attached to the "resize" event, so when you actually resize the browser window that will get call the event handler in large numbers, which is not good as per performance matrices. So using lodash you could use something called debounce _.debounce(func, [wait=0], [options={}]) which will wait for the time defined by you before actually running the function, so it will run only once the user has completed the "resize" event.

3. Antd

npm i antd

antd provides enterprise-class UI components for websites and apps. It has all the UI-level components you can expect and what makes it stand out from the competition is the customization it offers for its components.

4. humanize-number

npm i humanize-number

npm i humanize-number

It provides the utility functions to make the huge numbers human-readable. For example, it converts huge numbers like "1567893" into "1.56 M" or maybe you want to add a comma separator like 1,567,893.

5. easy-read-time

npm i easy-read-time

It will calculate the read time for your blog, you just need to pass the HTML of your blog/article and it will automatically strip down the tags and give you the read time for your content.

That's me signing off for today. Thanks!