DEV Community

Cover image for 5 open source packages to gain time for React.js
adil
adil

Posted on

5 open source packages to gain time for React.js

You’ve probably heard this a couple of times : “Don’t try to reinvent the wheel.”

It may hurt our ego, but honestly this phrase is to be taken at face value for projects that have to meet a deadline.

I’ll show you the 5 React packages that will save you a lot of time thanks to their features.


React Query

Hooks for fetching, caching and updating asynchronous data in React

I use React-Query regularly in my professional and personal projects.

This library allows you to manage queries and to have access to some very useful features that would take time to implement in a good way on your side.

A sample of code

For example, React Query allows you to have the status of your current query : is it pending ? is there an error ?

Or to refetch the data with a simple method 👌

I let you discover all the other very useful features on their website

React Hook Form

Performant, flexible and extensible forms with easy-to-use validation.

An essential when you have to manage forms on your app and check if the values respect the patterns, if the state of the form has been altered, if there is an error in the form...

Image description

In short, React Hook Form will allow you to manage your forms with a hook and its multiple variables that will lighten your conscience (and also your dev time)

Not bad, right? 👏

Zustand
Bear necessities for state management in React
(I love their website 😍)

An alternative to Redux and React's Context API, if you want to manage states without headaches, this is exactly the library you need.

Image description

Robust and simple, Zustand scores high in terms of developer experience.

And who doesn't like cute bears? 🐻

SweetAlert2

A beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes.

If like me, you have been looking for the right way or the right package to make popup dialogs, look no further!

SweetAlert2 is for me the reference in terms of popup package.

Image description

Image description

In short, if you need to display a popup at some place on your site, I recommend SweetAlert2 🔔

RadixUI

Unstyled, accessible components for building high‑quality design systems and web apps in React.

RadixUI is a library of components without any styles, very interesting if you use the Stitches package (by the same developers) or styled-components.

This library respects all the practices and standards of the web concerning accessibility or developer experience.

Image description

I let you have a look at their library, there will surely be something you will like 🤩


So have you found your next favorite package?

Feel free to share in the comments the packages that are saving you time right now or the one you didn't know

Follow me to keep up with my latest articles, I'm sure you'll enjoy the rest

Top comments (3)

Collapse
 
saiarlen profile image
saiarlen

Thanks for sharing! :)

Collapse
 
saiarlen profile image
saiarlen

Please add these too in your list
js-file-download
react-simple-animate
notyf
js-convert-case

Collapse
 
sardor_ulmasov_79e00b4adf profile image
Sardor Ulmasov

Thnx for sharing sir