DEV Community

Cover image for My React.js Library Bookmarks
Michael Gee
Michael Gee

Posted on • Updated on

My React.js Library Bookmarks

React mainly focuses on what it does best (rendering UI components to build user interfaces) and leaves the gaps to be filled by the huge community of developers and companies.

This means the number of popular libraries and ways of doing things can definitely add up which has its pros and cons:

Pros ✅

  • You are not locked into one way of doing something, you have an array of great options to suit your needs the best.
  • React has a HUGE ecosystem of people building and maintaining libraries, so odds are if you need to do something in particular there will (9 times out of 10) be an open-source npm package for it.

Cons ❌

  • This can be confusing for beginners. Since you have so many options, people sometimes just go for the most popular one even if it doesn’t necessarily meet their needs.
  • The latest and greatest is constantly changing, it is important to choose libraries that are actively maintained and will move forward with industry standards when it does.

With that being said, here is a list of the React libraries I currently have bookmarked. These emojis next to each library show my personal experience with each library:

  • ⭐ - my all-time favorites
  • ✅ - have used in production and would advocate for
  • 🕒 - have never used but am planning on using in the future
  • 🤔 - have never used but would be interested in
  • 👋 - have used in production but have since moved on from

Component UI Libraries

State Management

Client-Side Routing

SSG (Static Site Generation) / SSR (Server-Side Rendering)

Testing

Forms

Animations

Async

Data Tables

Internationalization


Honorable Mentions ➕

These are some other libraries that I have bookmarked/starred but have not yet used in production.

Drop-downs

Drag & Drop

Document <head> Manager

Icons

Loading Spinners

Social Media Share Buttons

Responsive Styling

With the vast ecosystem of libraries, I am sure that I left out some good ones. If I did, leave some of your favorite libraries in the comments and let me know what you think of the list!

Also if you like web development and meme content follow my Twitter 😄

Top comments (10)

Collapse
 
stlnick profile image
Nick

I’ve used recently and really like both Framer-Motion and Formik. Framer-Motion is easy to get into; very intuitive. Formik has a bit more of a learning curve but comes with some really nice built in features.

Collapse
 
michaelgee profile image
Michael Gee

I am actually implementing framer/motion for the first time on my personal website as we speak! Having a good experience with it so far 👍

I have not used formik yet because I went for react-hook-form for its hooks approach and have not had a need to switch away from it yet.

Collapse
 
stlnick profile image
Nick

I’ll have to give react-hook-form a shot, haven’t messed with it yet. Always easier to try something when someone recommends it.

Collapse
 
nefejames profile image
nefejames • Edited

Hi Nick. I'm trying to use framer-motion with Formik, but it doesn't seem to work by just doing <motion.ErrorMessage/>. How did you make them work together?

Collapse
 
stlnick profile image
Nick

Ya know I’m not sure if I actually used them on the same project...

My recommendation though would just be wrap whatever element you want to animate in a motion.div. Just make sure there’s no additional margin or padding on it - that will mess up your layout quick.

Thread Thread
 
nefejames profile image
nefejames

That makes sense. I'll try that. Thank you

Thread Thread
 
stlnick profile image
Nick

Absolutely, man. Lemme know if it works or not and I can try to mess around with it more to try and figure it out.

Thread Thread
 
nefejames profile image
nefejames

Will do. Thank you

Collapse
 
hyggedev profile image
Chris Hansen

Framer motion 👍 So fun, great docs, intuitive and easy to use.

Collapse
 
andrewbaisden profile image
Andrew Baisden

Some useful tools there thanks for sharing.