10 Useful React Components for 2020
Different React components for different occasions.
For me, small and specific solutions in the form of single components, make more sense than the all-in-one solutions offered by component libraries. I like to pick and choose my own components, I don’t like long documentations and I’d like to avoid meaningless updates that often break things.
A (frontend) library provides a consistent UI — an absolutely crucial thing. But, it may happen that you already have your own design system, your own UI library, and you’re looking to speed up development by finding customizable reusable components. In that case, it makes more sense to look for a single component than an entire library that houses the solution you covet, along with many other irrelevant ones.
In any case, whether you’d like to create your own private collection of reusable components or to browse an endless catalog, built by the open-source community, you may want to check out Bit (Github).
Bit gives you the power to “harvest” reusable components from any codebase and share them to a component collection in bit.dev. Use it with your team to maximize code reuse (in and across repos), speed up development and make your codebase more maintainable.
1. Carousel | React Awesome Slider
React Awesome Slider delivers smooth, beautiful and highly-customizable transitions. It is lightweight (only 7k) and fully supported by all major browsers.
2. Spreadsheet | React Data Grid
React Data Grid is a powerful, fast and easy-to-use component for an excel-like experience. It also includes keyboard commands, copy and pasting and many other features you would expect to see in a native spreadsheet. As mentioned earlier, react-data-grid offers a simple API that would get you using it in seconds.
3. Notifications | CogoToast
Choosing between an endless selection of notification components is not an easy job. There are many excellent ones but what made CongoToast my personal favorite is (again) its elegance and simplicity. It’s a tiny package, only 4k in size, it has a simple API and a slick look that goes well with many UI designs.
4. Map | Google Maps React
Google Maps React is a pretty popular component that makes it quick and simple to place (with specific coordinates) React components on top of a google map.
5. Tooltip | React Tooltip
React Tooltip is a highly customizable tooltip component that would be a perfect match for any UI design you may have. React Tooltip truly covers anything you may want to do with a tooltip with things like custom events, delays, “live updates” of the tooltip’s content, and much more.
6. Loaders/Blockers | React Block UI
React Block UI is simple to use component for disabling the user interface while indicating “loading”.
7. Payment Details Form | React Credit Cards
I wasn’t planning on finding the best component for the “Payment Details” category but this component is simply too awesome to leave out 😃 It is easy to use and customizable. “React Credit Cards” even displays the credit card company that matches the entered credit number.
8. Render Markdown | React Markdown
React Markdown is a quick and easy solution for rendering markdowns (including HTML). Not much can be said about it except it does exactly what it says on the tin, and it does it well.
9. Color Picker | Coloreact
Many UI libraries offer their own color pickers but, Coloreact manages to provide the ultimate balance between simplicity of use and customizability — giving you great control over how it looks and behaves, without demanding too much of your time.
10. Calendar | React Big Calendar
If you’re looking for a calendar equipped with all the frequently used features a “professional” calendar has, then React Big Calendar is the component for you. Resource scheduling, localization, custom time grids, or just the usual drag-and-drop — you’ll find them all there.
