I’ve built a lot of things in React and there are a bunch of libraries that have helped me out greatly.
Aside from popular ones like React Router, Styled Components, etc, there are a bunch that are useful for more specific things.
Here are my favorite #reactjs libraries 👇
📝 Forms: Formik by @jaredpalmer
My favorite lib for building forms in React.
Great usability through the set of components it provides and really nice hooks for customizing the experience and getting lower level if you need it.
https://t.co/XOSRArQxsC
🏎 Autocomplete: Downshift by @kentcdodds
Downshift is great for building autocomplete experiences (and more).
It gives you all the logic and functionality of autocomplete but you get full control over the UI. No fighting against pre-built styles.
https://t.co/ABy7NEPLzE
🖥 UI Components: Chakra UI by @thesegunadebayo
Amazing library of commonly needed components.
Some of the ones I’ve used a lot are the sliders and modals.
Great API for styling, lots of flexibility, great accessibility, plays well with others 👍
https://t.co/FrrucTd0aB
🧾 Menus: Headless UI by @tailwindlabs
Headless UI gives you logic and functionality for a few kinds of components.
I'm a big fan of the dropdown menu. Making them a fully-functional and accessible is way harder than it seems. Headless UI nails it.
https://t.co/9TM8Cms5Rq
🗓 Calendars: React Big Calendar
I’ve built a couple apps that have required a “big” calendar where I can display info in a cell for each day.
React Big Calendar has worked well for this. Flexible date rendering and other goodies like agendas 👍
https://t.co/4j6sPBPcRl
🗒 Select Lists: React Select by @JedWatson
Probably the one I've used most.
Default browser selects often don't cut it for the UX you’re going for.
React Select does a great job of doing multi-select and allows a lot of flexibility over styling.
https://t.co/Z5ygglXIWo
🗄 Tables: React Table by @tannerlinsley
The best table library for React.
It's now a headless experience where you provide your own UI. This means you need to write more code initially but the hooks it exposes are quite nice and give full control.
https://t.co/xkYR4mPgK2
📅 Datepicker: React Datepicker
Native browser date pickers are decent but it’s probably still better to have a common UI across browsers.
react-datepicker is simple but has worked really well for me.
https://t.co/KX1zd3mFd7
☠️ Loading States: React Skeleton Loader
There are a few different patterns I use for loading states but one I really like is the skeleton loader UI.
It's helpful for preventing layout shifts once data is loaded in.
https://t.co/kOBHPiGuoa
🚐 Onboarding: Reactour by @elrumordelaluz
I have mixed feelings about the UX of onboarding flows where you get popups showing you around the app.
But if you’re going for that sort of thing, Reactour is great. Really clean styles, easy to implement.
https://t.co/azDmlIFp1B
🏛 Classnames by @JedWatson
I use this one all the time to conditionally apply classnames.
This is especially useful when using utility classes like the ones Tailwind provides.
https://t.co/hjbFytNnwK
Add your favorite React components to this list!