5 Lesser-Known NPM Packages I Didn’t Know I Needed as a Web Developer

Less-talked-about npm packages that are incredibly useful.

Photo by Vanessa Garcia from Pexels

Dependencies are a critical part of web development, but like all things, it has its own pros and cons.

In fact, building things without dependencies is so rare that it serves as a unique product feature. But this in no way means that dependencies are bad or make your app slow.

I recently wrote about 7 ridiculous npm packages that you will be surprised to see.

The primary reason such packages exist is that there are millions of npm packages and with no entry barrier, developers are free to publish their own packages.

Hence, you are bound to find quite a few pointless packages. Similarly, you are also going to find some incredibly helpful packages as well.

In this blog, we will discuss some of the useful packages that I use in every project.

Below are 5 npm packages I didn’t know I needed:

#1. Editor.js

Demo of Editor.js

Last year, I built a blogging platform, and thus needed a rich text editor that will allow my users to style and customize their blogs.

I implemented the popular WYSIWYG (What You See Is What You Get) editor React Draft. At the time of writing, Editor.js has 13,778 weekly downloads whereas React Draft package touches almost 200k, almost 15 times more downloads.

The highlighting feature of Editor.js is that it is a block-styled editor which means it creates separate blocks for different elements like paragraphs, images, lists, etc.

This also enables Editor.js to render clean JSON data. Other text editors such as Draft.js produce HTML-markup data which is harder to store. This is what the data output looks like:

{
   "time": 1550476186479,
   "blocks": [
      {
         "type": "header",
         "data": {
            "text": "Editor.js",
            "level": 2
         }
      },
      {
         "type": "paragraph",
         "data": {
            "text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration."
         }
      },
      {
         "type": "header",
         "data": {
            "text": "Key features",
            "level": 3
         }
      },
}

You can see the benefit of JSON data, such as the ability to build custom readers, manage and saving them, and much more.

Moreover, the plugins are very easy to install and the package is very less as well, just 150kB compared to React Draft’s 280kB.

#2. date-fns

Source

I have been using the date-fns package for quite some now and the reason is quite simple, it simply works.

I have experimented with a few date & time libraries such as Moment.js and Luxon.js, and from my own experience, date-fns is the superior package.

As the name date-fns suggest, you get several functions for manipulating dates and you only import functions that you need instead of importing the whole API or creating instances(like in Moment.js).

The functions are pure and you also get i18n support and it does so by leveraging the native Date APIs.

import { format, formatDistance, formatRelative, subDays } from 'date-fns'  

format(new Date(), "'Today is a' eeee") //=> "Today is a Monday"

formatDistance(subDays(new Date(), 3), 
               new Date(), 
               {addSuffix: true }) //=> "3 days ago"  

formatRelative(subDays(new Date(), 3),
               new Date()) //=> "last Friday at 7:26 p.m."

#3. nodemon

Source

Nodemon is quite a popular package with over 3.5 million weekly downloads(as you can see from the image above) as of July 2021.

It is essentially an automation tool that restarts the node.js-based applications whenever you make & save file changes.

It is not meant to be used in production but during the development phase and thus, it is wise to download it as a development dependency.

npm install --save-dev nodemon

You have to then modify your package.json’s scripts properties.

....
"scripts": {
    "start": "nodemon my_file.js"
  },
....

Then you can use the npm start command in CLI and now your server will automatically restart to reflect the latest changes.

You can also run non-node scripts like python programs using Nodemon.

#4. React Hook Form

Source

Building and saving forms was a cumbersome and unnecessarily tedious part of my development process.

Form validation, error handling, state of the form are just some of the core aspects of working with forms.

Again, I experimented with a few popular choices like Formik. Formik is used by a lot of popular companies like NASA, lyft, Stripe, Nasdaq, etc.

I really liked Formik but recently stumbled upon React Hook Forms and it overcomes many shortcomings of Formik.

For starters, React Hook Forms have 0 dependencies whereas Formik has 9. The lower the number of dependencies, the better it is.

You can also see that the React Hook Form re-renders very little compared to Formik.

However, one thing I loved the most was that React Hook Form offered a form builder and you can use it in any framework or library.

Formik gets 1.4 million weekly downloads compared to Hook Form’s 890k downloads on npm.

#5. uuid

Source

This is a very powerful package that is quite popular rightfully so as well, with almost 50 million weekly downloads.

This package allows you to generate universally unique identifiers easily. You can use these identifiers to name files, give users unique identity numbers, and other such tasks.

It has 0 dependencies and over 37,000 dependents(that is, the package is used by over 37,000 packages).

It uses complex algorithms to create UUIDs and offers different versions.

There’s also an option to check the validity of the UUID.

Final thoughts

NPM has over 1 million packages and it can be quite hard to find good and apt packages for your project.

I have shared a few which I have been using a lot lately and some aren’t so popular like Editor.js and React Hook Forms as their alternatives.

But hopefully, more discussions surrounding these packages will take place in the near future.

I have excluded a few packages such as amCharts because not every project requires the use of charts and I will be making a detailed guide on it soon instead of just giving an overview.

Hope you enjoyed reading this article!

More content at **plainenglish.io**