How to choose the right NPM package + useful packages for React & NextJS (November 2022)

Intermediate

30 minute read

Introduction

To solve a development task, it’s better to take a step by step approach. That’s why developers create and use packages, which they can use in whatever project they are currently working at. Expanding the article series called “Useful NPM packages for Node.js” we will also periodically publish a collection of tips, tricks and useful NPM packages for React and/or NextJS.

In this article we are going to talk about how to choose the right NPM package for you, and we are also going to mention some of our recommended package we use in our React/NextJS projects.

Prerequisites

You should be familiar with JavaScript to get the most out of this article, while knowledge of TypeScript would be even better. You should also be comfortable with using the command line on your particular platform.

To install and use npm packages you need Node.js, download Node.js from the official site. If you’re running a Linux system, you can also install Node.js through your terminal, like this.

How to choose the right package?

The first thing to talk about is how do you choose your package. There are lots and lots of packages on NPM. Some are serious packages which are widely used, some are made by the community and some are made by large companies, some are not used anymore and some you should never use! Maybe this didn’t clear up the question, but we will get to that very soon!

There are a few questions you need to ask yourself when choosing a package:

Who is the author?

You basically need to ask yourself: “Is this author credible?”. Most of the packages are community maintained, meaning some hobbyist decided to publish a solution to a problem he/she has had. You can tell if the community takes a liking to a packages when there are a lot of independent contributors, but at the same time you are running into a possibility that they abandon the project if something better comes along. On the other side of the spectrum, you would think that big companies should create packages that are maintained, well documented and reliable, but that isn’t always the case. There are excellent packages which are open source and maintained by both the company and the community, while some are maintained only by the company who created it. An example of what not to use is react-beautiful-dnd which is developed by Attlassian, who have a reputation of creating non-performant, non-maintained packages, which you should almost always avoid if you can.

When was the last change made?

This should be one of the biggest indicators if you should use this package. If no changes have been made for a couple months, that’s already alarming. If no changes have been made for more than half a year, that package is probably dead and you shouldn’t use it. Although this is a rule of thumb it doesn’t have to be for all packages, some just don’t need to change often and/or you may have no other choice (unless you build it yourself).

how big is it’s file size compared to similar packages?

With the ever-growing need for more features, better UI etc. your application will pretty soon get very heavy (have lots of dependancies), which then impacts performance. That is why another big factor is package size. For example, when comparing React libraries for creating charts, react-chartjs-2 has 54.9 KB vs recharts which has 5.04 MB. That’s a pretty big difference if you ask me.

what do the docs look like?

Check out the documentation. Does it exist? If not, that should be a big red flag because it will take a lot of time just to understand how it works. Not to mention what happens if you run into bugs, caveats etc. In React-land for example, how is the API structured, how do you use it? Do they use a modern, flexible API or something older (like classes)?

Are there any active discussions ABOUT IT ON github/ Community forums/ stackoverflow?

A reliable indicator for a good package is the amount of discussions, questions and issues being added and resolved. It shows that lots of people are actively using and improving it. Not to mention, you are probably going to have to google problems you run into, and it’s good to know you’ll most likely be able to find the solution.

what are the npm trends for it?

Although it’s not the most relevant information, looking at the number of downloads and comparing them with similar packages can give you an indication at what other developers are using the most. On sites like https://npmtrends.com/ you can compare different packages and see the average/daily/monthly/yearly downloads.

It should be noted that you should take into consideration all of these question, however, you do not need to fulfill all of them, nor do you need to stick to them 100%. Sometimes you will not have a choice but to use some package regardless (unless you make it yourself).

And now without further ado, here are our recommended packages!

⌜ @formkit/auto-animate⌝

Do you find adding animations to be a hassle? Look no further! Auto-animate is the easiest way to implement simple transitions in you React apps. It’s a general purpose animation hook, where you only specify a reference to the parent element, and all children are animated automatically.

Installation (npm) :

Copy to Clipboard

Usage:

Copy to Clipboard
More auto-animate info and examples here.

⌜ framer-motion⌝

If your animation needs require something more complex than @auto-animate, then check out Framer Motion. It provides a simple, declarative syntax and allows you to write less code to craft everything from complex animations (element animations, page transitions…) to even gestures. Replace the elements you want to animate with the motion.{element_tag} prefix, add animations properties and you are done!

Installation (npm) :

Copy to Clipboard

Usage:

Copy to Clipboard
More framer-motion info and examples here.

⌜ jotai⌝

For never using Context again! Jotai features a more atomic approach which is hard to beat. By Poimandres which can always be trusted. Jotai lets you define singletons that feel like global useState. It’s a great option for stateful behaviors that don’t need a state machine just yet.

Installation (npm) :

Copy to Clipboard

Usage:

Copy to Clipboard
More jotai info and examples here.

⌜ zustand⌝

For when Jotai is not enough. Zustand is the “modern, simple Redux” you didn’t know you needed. Again by Poimandres. You can build everything from video call apps to games to servers with this little library.

Installation (npm) :

Copy to Clipboard

Usage:

Copy to Clipboard
More zustand info and examples here.

⌜ @floating-ui⌝

Floating UI takes a modern, modular approach to creating floating elements (tooltips, popovers, dropdowns, menus, and more). One of it’s biggest benefits is it’s modularity. The base package is only 0.6KB in size, and on top of that you can import any feature you need, as not to clutter your application. It van be used with plain JS, but also has React specific features for interacting with the DOM, and can even be used to work with gestures.

Installation (npm) :

Copy to Clipboard

Usage:

Copy to Clipboard
More @floating-ui info and examples here.

⌜ @tanstack/react-query⌝

React query is a powerful asynchronous state management for JavaScript and TypeScript apps. It will handle data fetching, updates, deletes and much more. React developers tend to use Context or other state libraries, some of which we mentioned today, but most use cases can be solved using just this package! If you used react-query before, do not let the new name @tanstack fool you. The newest version, v4.x, just changed it’s name but it is still the same package and author.

Installation (npm) :

Copy to Clipboard

Usage:

Copy to Clipboard
More @tanstack/react-query info and examples here.

⌜ react-select⌝

React select is a flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, and creatable support. With it’s rich features and modern API it will solve all problems you ever had with the select input!

Installation (npm) :

Copy to Clipboard

Usage:

Copy to Clipboard
More react-select info and examples here.

⌜ @types/…⌝

This one is for all the TypeScript fans (if you are still using JS over TS in your projects, you should stop). The problem with TS is that not everyone has adopted it yet, although it is starting to become the go to language for any JS projects nowadays. Especially some older packages do not have type definitions which will throw TS errors and make you wonder what’s going on. Thankfully most of these problems have been solved by the community. Almost every more popular library has it’s type definitions defined in the @types/{package-name} library. Google it and you will find it!

Installation (npm) :

Copy to Clipboard

Usage:

Copy to Clipboard

Conclusion

In today’s article we’ve discussed how to choose the best NPM package for your project. We’ve explained what you should look out for as well as some tips which will help you achieve exactly that.

Additionally, we included some packages which we use in most of our React/NextJS projects. We have analyzed all the aspects we talked about today for all of those packages, and we can confidently say these are currently some of the best in their fields. So definitely try them out and see for yourselves!

We hope this article makes your developer life a little bit easier! Look forward to the next package collection for React and/or NextJS where we will dive into more specific packages. Thanks for reading, peace out ?