Below you will find a list of npm packages divided into different topics like state, UI, and utility for easier navigation.

Best React Packages: Our Picks

State

Redux Toolkit

When Redux, a predictable state container came around, it helped to handle all the global states in React applications. With time a lot of developers started to adapt it to their needs, which resulted in various implementations of Redux. The Redux team decided to create a tool that is opinionated and makes it easier to implement Redux in React applications. It supports TypeScript and hooks out of the box. It also has a lot of tools that make it easier to create store, actions, selectors, and even data fetching.

Jotai and Zustand

React and state management — this feels like a never–ending story. Redux was one of the first libraries that made it “easy” to manage global state, but since then, React has evolved. Patterns like component composition and the introduction of React context and hooks made it easier to manage the global state and solve the issue of prop drilling. Despite all that, there are cases where you need to have some values saved in global state, and using Redux feels like an overkill.

That’s where Jotai and Zustand come to the rescue. Both libraries are lightweight and require minimal setup to work. Jotai works of an idea where every piece of state is an atom, where Zustand looks more like Redux with a global store. Both offer hooks, support TypeScript, and are developed by Poimandres, an open–source developer collective.

User Interfaces

Styles Components

When it comes to styling a React component, you have some options: use traditional CSS or some of its preprocessors, CSS modules, inline styles, and CSS–in–JS. Styled components let you write CSS–in–JS styles. Its well–written documentation and SCSS–like syntax make it easy to use and start for new developers. It has support for TypeScript, media–queries, and Themes.

What new developers might find difficult when starting to use this library is a different approach to mental models. You no longer have to write React components with component logic and separator styles, but only with styles. And then you can use it wherever you need — for example, inside another component that has some already existing logic. Other than that, the library has a great community and it’s widely used in a lot of open–source projects.

Emotion

Emotion is another CSS–in–JS library. It’s written in TypeScript, handles server–side rendering (SSR), and can be used without any configuration. Emotion lets you decide how you want to write styles: you can write styles like in styled–components, use className prop or the CSS to style the component. It’s lighter than styled–components, but despite being less known, it’s still a good choice to use in your projects.

Tailwind CSS

Tailwind CSS is a style utility CSS library. It uses utility classes to style just the right components and make all the applications easy to maintain. It has good documentation and a growing community. The drawback is that your HTML might be bloated with class names and become harder to read.

Utility

Storybook

Storybook is a tool for building UI components in isolation. It lets you develop, test, and document new components and pages. Storybook comes with a set of extensions like docs, actions, controls, or a viewport so you can test the look and behavior of your components and pages before using them in your app. It comes in handy when developing a UI library or just documenting your components.

React Testing Library

React testing library is a library that makes writing tests easy. Its main focus is to test the actual functionality of the components rather than their implementation. The library uses DOM queries to select the elements. So if you want to test some inputs, you can simply select the label. And, for example, if you want to test a certain button component by text, then you search by button text. Just like the user would do.

Classname and clsx

Let’s say that you decide to use plain CSS classes to style your app. You have to write the main styles for a button, styles for a disabled button, and styles for an outlined button. To conditionally combine all these class names, you can use classname or clsx. Both do the same thing and claim to be faster and lighter than the other 😉.

React Table

Creating and handling data in tables is usually a hard task. Selecting rows, data order in columns, pagination, etc. might seem easy but end up being hard with the rising amount of edge cases that the initial design didn’t account for. React Table, a utility library meant for handling all that data in a table, solves that problem efficiently. It separates the table’s UI from its data handling.

React DnD

For those cases where you need to handle drag and drop, React DnD might be the perfect solution. It’s a React library built on top of the native HTML5 Drag and Drop API. Moreover, it’s cross–platform thanks to providing different backends for desktop, and mobile, as well as support hooks for easy use.

React Spring

React spring is a library that facilitates making animations in React. It’s based on the concept of using springs for animation contrary to duration and curves present in traditional CSS. It’s written in TypeScript and exposes hooks as well as components to handle all sorts of animations that will help you create interactive UIs.

React Hook Form

Almost every website has some form. It might be as simple as a contact form with basic information or as complex as a multi–step questionnaire. In the former case a simple component with some state will be enough, but in the latter, a library might be needed — such as React Hook Form. As the name suggests, it’s a set of hooks that makes it easier to work with forms. 

Data Fetching

React Query

Fetching data, caching data, updating data. All these tasks seem trivial (except for caching 😅). It’s enough use axios or fetch to get data from the server and you’re all set. But when our application starts to grow it’s a good idea to use some tool that will easily pass rich data from the server and have it up to date. That’s where the React query comes in. It’s a set of hooks that make it easy to fetch and mutate the data. It has built–in devtools, so you don’t have to add another extension to your browser. TypeScript support and its data fetching mechanism is agnostic, which means that you can use it with REST and GraphQL without rewriting existing code.

SWR

SWR (stale–while–revalidate) is a data fetching library. It’s lightweight and hook–based. It’s a fairly new library, compared to React Query. What makes this library special is that it’s developed and maintained by Vercel, the same company that maintains NextJs. You can give it a try in some of the smaller projects, since currently it covers less functionalities than React Query.

The Conclusion

As you can see, there are a lot of tools that perform similar functions. It’s up to you to choose the React packages that will fit your existing technology stack best. Remember though, that these packages don’t work with React Native, since it’s a completely different technology from React, despite some similarities.

Nevertheless — happy coding!