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
- Semantic UI React ✅ https://react.semantic-ui.com/
- Fluent UI ✅ https://developer.microsoft.com/en-us/fluentui#/
- Chakra UI 🕒 https://chakra-ui.com/
- Ant Design 🤔 https://ant.design/
- Material UI 👋 https://material-ui.com/
- React Bootstrap/reactstrap 👋 https://react-bootstrap.github.io/
State Management
- React Internal State / Context (not a library) ✅ https://reactjs.org/docs/context.html
- Redux 👋 https://redux.js.org/
Client-Side Routing
- react-router ✅ https://reactrouter.com/
SSG (Static Site Generation) / SSR (Server-Side Rendering)
- Next.js ⭐ https://nextjs.org/
- Gatsby 🤔 https://www.gatsbyjs.com/
Testing
- react-testing-library ⭐ https://testing-library.com/docs/react-testing-library/intro
- Enzyme 👋 https://enzymejs.github.io/enzyme/
Forms
- react-hook-form ✅ https://react-hook-form.com/
- formik 🤔 https://formik.org/
Animations
- framer/motion 🕒 https://www.framer.com/motion/
- react-spring 🤔 https://www.react-spring.io/
- react-motion 🤔 https://github.com/chenglou/react-motion
- react-transition-group 🤔 https://github.com/reactjs/react-transition-group
Async
- react-query ✅ https://react-query.tanstack.com/
Data Tables
- react-table ✅ https://react-table-omega.vercel.app/
Internationalization
- react-intl ✅ https://github.com/formatjs/formatjs
Honorable Mentions ➕
These are some other libraries that I have bookmarked/starred but have not yet used in production.
Drop-downs
- react-select https://react-select.com/home
Drag & Drop
- react-dnd https://react-dnd.github.io/react-dnd/about
- react-beautiful-dnd https://github.com/atlassian/react-beautiful-dnd
Document <head> Manager
- react-helmet https://github.com/nfl/react-helmet
Icons
- react-icons https://github.com/react-icons/react-icons
Loading Spinners
- react-spinners https://github.com/davidhu2000/react-spinners
Social Media Share Buttons
- react-share https://github.com/nygardk/react-share
Responsive Styling
- react-responsive https://github.com/contra/react-responsive
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)
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.
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.
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.
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?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.That makes sense. I'll try that. Thank you
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.
Will do. Thank you
Framer motion 👍 So fun, great docs, intuitive and easy to use.
Some useful tools there thanks for sharing.