Read on Twitter
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
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 @jaredpalmerMy 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://formik.org/
Autocomplete: Downshift by @kentcdoddsDownshift 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://www.downshift-js.com/
UI Components: Chakra UI by @thesegunadebayoAmazing 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://chakra-ui.com/
Menus: Headless UI by @tailwindlabsHeadless 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://github.com/tailwindlabs/headlessui/tree/develop/packages/%40headlessui-react
Calendars: React Big CalendarI’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
http://jquense.github.io/react-big-calendar
Select Lists: React Select by @JedWatsonProbably 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://react-select.com/home
Tables: React Table by @tannerlinsleyThe 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://react-table.tanstack.com/
Datepicker: React DatepickerNative 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://github.com/Hacker0x01/react-datepicker
Loading States: React Skeleton LoaderThere 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://github.com/henrykuzmick/react-skeleton-loader#readme
Onboarding: Reactour by @elrumordelaluzI 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://reactour.js.org/
Classnames by @JedWatsonI use this one all the time to conditionally apply classnames.
This is especially useful when using utility classes like the ones Tailwind provides. https://github.com/JedWatson/classnames#readme
Add your favorite React components to this list!
