DEV Community

loading...
Cover image for You Need to Try These 10 NPM Packages as a React Developer

You Need to Try These 10 NPM Packages as a React Developer

itsnitinr profile image Nitin Ranganath Originally published at thesmartcoder.dev ・5 min read

As web developers, we tend to make use of several NPM packages on a daily basis for different reasons, from simple ones like adding colors to the console.log() statements on our terminal to fully-fledged front-end libraries such as React. These packages increase our productivity and save us a lot of time by not having to rewrite things that have been implemented several times by tons of users.

In this post, I'll introduce you to 10 NPM packages that you should check out if you're learning React or already are an experienced user. We'll be going over multiple domains such as UI frameworks to utility-based packages. Without further ado, let's get started.


Material UI

Material UI

Material UI is probably one of the best UI frameworks built for React, allowing you to build a consistent design system while leveraging Google's Material Design. Material UI helps you in building and designing by providing over 50+ components such as cards, progress bars, modals, and a lot more, which you can further theme as per your requirements. If I had to recommend a UI framework to a React developer, Material UI would surely be my first choice.

Link to NPM Package

Redux Toolkit

Redux Toolkit

Although the useContext and useReducer hooks have reduced the need of using Redux in modern applications, it's not uncommon to see a lot of codebases still Redux for global state management. Redux is still a valuable skill to learn in my opinion and does have its own use cases. However, the amount of boilerplate it takes to set up Redux in your React application can be overwhelming, especially for beginners.

Redux Toolkit aims to solve just that! It is advertised as the official, opinionated, batteries-included toolset for efficient Redux development and is also highly recommended by the official Redux team to write your Redux logic. Do yourself and your codebase a favor by choosing Redux Toolkit over regular Redux next time.

Link to NPM Package

React Icons

React Icons

React Icons is a marvelous package that consolidates icons from over a dozen of popular icon sets such as Font Awesome, Material Icons, Ant Design Icons, and more. This makes it extremely easy to have access to all your favorite icons just by installing a single package without having to install each of them individually. Through ES6 imports, you can make sure that you import only those icons which you intend to use.

Link to NPM Package

React Google Login

React Google Login

OAuth or Open Authorization enables users to sign up or log in to your website through other providers such as Google, Facebook, Twitter, GitHub, and more. You must've noticed the 'Login with Google' button on lots of popular websites. React Google Login allows you to accomplish the same functionality and makes the authorization process easy for you. All you need is an API key from Google and you're set to implement Google OAuth in your website using this simple package.

Link to NPM Package

Formik

Formik

Formik makes the painstaking job of building forms in React easier by taking care of all the repetitive stuff such as keeping track of value state, change handlers, submit handlers, validation, and more. This form library is small, simple and encourages you to spend less time writing form code and focus on building your big thing. It is well documented and has a dedicated tutorial for you to get familiar with it.

Link to NPM Package

React Query

React Query

An essential part of a full-stack web application is fetching the data from your backend API or server state and loading them into your component or global state. If you're using Redux, this process might be firing an action in your useEffect hook to fetch data from your backend when the component is mounted. Well, what if there could be a better alternative to this approach?

React Query is an excellent data-fetching library that is the perfect candidate for this use case. Not only fetching, but React Query is also capable of caching, synchronizing, updating server state, paginating, and even lazy loading. Everything you need to make your interactions with the backend more fruitful is baked into this library and I highly encourage you to give it a try. Alongside performance improvements, it will help you make your codebase cleaner and more maintainable.

Link to NPM Package

Styled Components

Styled Components

Styled Components is a CSS-in-JS library which JavaScipt's tagged template literals to create styled HTML components. Why should you consider this over the regular CSS approach? Good question! Styled Components provides a component-like structure to your custom styled elements and saves you from typing className a bunch of times. Furthermore, it has some valuable features like automatic vendor prefixing and automatic critical CSS. Since Styled Components use the regular CSS syntax, you can transition pretty quickly to it.

Link to NPM Package

Axios

Axios

Axios is a promise-based HTTP client based on the XMLHttpRequest interface which helps you make HTTP requests in order to fetch some data. But wait, isn't that what the native fetch() is used for. Well, yes. Just like other packages, the goal of this package is the simplify the process and provide more features such as automatic JSON data transformation, intercept request and response data, protect against XSRF, cancel requests and provide you a simpler API to work with for making HTTP requests.

Link to NPM Package

Framer Motion

Framer Motion

Framer Motion is an amazing animation and motion library for React to make your websites more interactive and fun to look at. Just visit their landing page, and you'll be blown off by the sheer ease to use and the number of features they provide ranging from general animations, gesture-based animations, drag animations, scroll animations and so much more. Let me put it this way: if you were on the lookout for animation libraries, look no further than Framer Motion.

Link to NPM Package

Reselect

Reselect

This particular package is especially useful if you're Redux and are trying to improve the performance by avoiding unwanted expensive calculations. In a nutshell, Reselect is a selector library that allows you to efficiently compute derived data from the Redux store through memoization and by memoized selectors. If performance is key to your React-Redux application, definitely check out Reselect.

Link to NPM Package


So that was my list of 10 NPM packages that I think you should have a look at if you're working with React. Let me what packages do you use to make your workflow simpler and more productive, I'd love to hear them. Until then, happy coding!

Discussion (33)

pic
Editor guide
Collapse
nassimmiled profile image
nassimmiled

Why do we use axios when we have fetch?

Collapse
itsnitinr profile image
Nitin Ranganath Author • Edited

Mostly because it is simpler to work with. Here's an example considering that I want to fetch from todos from a sample API:

With fetch:

const response = await fetch('https://jsonplaceholder.typicode.com/todos');
const todos = await response.json();
console.log(todos);
Enter fullscreen mode Exit fullscreen mode

With axios:

const todos = await axios.get('https://jsonplaceholder.typicode.com/todos')
console.log(todos)
Enter fullscreen mode Exit fullscreen mode

Notice how we didn't have to manually convert the response manually to JSON. It's because axios does that automatically for us. This is just one of the features. So yeah, it saves us some time and lines of code.

Collapse
clydegrey profile image
Clyde

You used then for one example and async/await for the other. It's better if you want to show a like for like comparison that you stick to the same approach so that you can highlight just the differences between then two. This makes fetch seem more verbose and more difficult to read when most of that is due to await being more concise.

Thread Thread
itsnitinr profile image
Nitin Ranganath Author

You're right. Edited the example to use async-await in both cases. Thanks for notifying.

Collapse
nassimmiled profile image
nassimmiled • Edited

we can use it like this.
of course Axios easier, but why do we use something extra, we will definitely lose performance while we have a replacement ( by default) that serves the same purpose.

Thread Thread
kacperturon profile image
Kacper Turon

well it's not exactly the same, axios comes with backwards compatibility, and polyfills in old browsers, it will work almost everywhere

Thread Thread
clay profile image
Clay Ferguson

This is making me feel like I may no longer need Axios (which I currently use). I don't need to support older browsers, and since I have it 'wrapped' in a function of my own anyway it doesn't matter to me if it's using 'then' or 'await' for the async parts.

Collapse
hseritt profile image
Harlin Seritt

Depends. Do you want to write your implementation code (using the objects you downloaded with fetch) in your fetch stream? or do you want to get it in a more synchronous-looking fashion? Either is fine really but in React (or Angular or any other framework), your code can be more straightforward and much easier to read. Just depends on what you really need.

Collapse
clydegrey profile image
Clyde

Not sure I understand why axios would be easier to read than fetch. Can you provide an example?

Thread Thread
hseritt profile image
Harlin Seritt • Edited

Sorry, Clyde ... did you mean this for the OP or me? It can be easier to read for some than others perhaps. It sounds like any example I show you will not convince you which is fine. Ultimately there is no "better" way to do anything really. There is what you feel fits a use-case.

Thread Thread
clydegrey profile image
Clyde

You said axios is more synchronous-looking than fetch. I was curious how.

Thread Thread
hseritt profile image
Harlin Seritt

Got you. Note that it looks more like a C type function call rather than a functional programming call -- this is what I meant by that. A lot of programmers tend to believe that C type or object-oriented (or even procedural) is easier to read. It is for me since I grew up using those type of languages/paradigms but for someone who may have learned JavaScript or a pure functional language might not see it the same way.

Collapse
thesavage_dev profile image
Jason A. Savage

Here's a good article for that: masteringjs.io/tutorials/axios/vs-...

You can implement axios features with your own fetch wrapper, but...sometimes. npm i axios is a lot easier.

Collapse
geobrodas profile image
Georgey • Edited

Axios comes in handy if you're a Rest-API fan

Collapse
promikecoder2020 profile image
ProMikeCoder2020

As some have already said it clmes with better browser support and syntax, but it's biggest advantage is having extra features likr timeout request and others

Collapse
clay profile image
Clay Ferguson

Thanks for sharing! If that Google Login module is genuinely high-quality and works that will be amazing. I've coded that stuff myself in the past and it's not easy. It's really great to know someone solved it in a reusable way!

Collapse
itsnitinr profile image
Nitin Ranganath Author

You're very welcome! I hope you find react-google-login worthy. Personally, I've used it everytime I had to implement the Google OAuth button and it works perfectly. You can try out the demo whose link can be found on their NPM page :)

Collapse
clay profile image
Clay Ferguson

Thanks for letting me know. It helps knowing you've used it yourself with success, rather than something you were just merely aware of.

Collapse
laszab profile image
Bart

Reselect is already re-exported in Redux Toolkit so there is no need to add this as separate dependency but if you don't use Redux Toolkit which I highly recommend then it's good to use Reselect. Good article :)

Collapse
ash_bergs profile image
Ash

I've used most of these and agree, 10 amazing and useful packages. Thanks for the write up!

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thank you for reading! :)

Collapse
dannemanne profile image
Daniel Viklund

Nice summary, thanks!

Regarding the highlight of formik, have you hade any personal experience with react-hook-forms and if so, how do you think those two packages compare two each other?

Collapse
itsnitinr profile image
Nitin Ranganath Author

Sorry, I've not used react-hook-form so I can't really compare them myself. However, I did visit their website and it seems pretty awesome. Their landing page has some comparison with Formik and I think you'll be interested in that. Here's a screenshot for your reference:
Comparison

Collapse
ducdev profile image
Duc Le

Please separate form usage from redux, it would be an unnecessary mess in redux history.

Collapse
dannemanne profile image
Daniel Viklund

No argument here. Neither of us were talking about redux

Collapse
tranduclinh197 profile image
Collapse
itsnitinr profile image
Nitin Ranganath Author

You're welcome!

Collapse
oskarsezerins profile image
Oskars Ezerins

Great post, cheers.

Collapse
akh47 profile image
Akhil Kala

Great work! Please do more

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thank you so much! I'll sure try to make it into a series of sorts if I find more interesting packages.

Collapse
ghadersalehi profile image
ghader-Salehi

good job , useful article

Collapse
hseritt profile image
Harlin Seritt

Thanks for the post, Nitin!

Collapse
itsnitinr profile image
Nitin Ranganath Author

Thank you for reading!