To build your own team’s library, without tons of overhead, try using Bit.dev. Bit lets you isolate components from any project/codebase and share them on a collection (a modular library) in bit.dev. This way you can build your component library gradually and in parallel to your main work (so you don’t lose focus on the thing that matters most — creating an awesome app)
Example: harvest components from your app
Here’s a short example, using a simple to-do app:
Let’s say I want to export my app’s components to a shared collection (library)
Initialize a workspace and log in:
$ cd basic-todo-app
$ bit init
$ bit login
Add (all) components:
$ bit add src/components/*
Configure a React compiler (components are built independent of your project’s build configurations) :
$ bit import bit.envs/compilers/react --compiler
Tag and export to a shared collection (create your own collection in bit.dev):
$ bit tag --all 1.0.0
$ bit export username.collection
Voilà! My app’s components are now available in my shared library:
Some of the key features of this library are:
- It provides a very simple start, there is no need to write a lot of boilerplate code, you just import it and start extendinng the primitive components and create the ones you need.
- Thanks to the fact that it’s based on Styled System props, it provides an amazing developer experience (or DX, as I like to call it).
- Once you start getting used to the workflow and syntax, you can start implementing themes, providing an amazing level of customization and extensibility to your application. The best part? The themming system is fully compatible with Theme UI, which is another way of saying: it’s built on top of a very solid library that was designed to provide themming to your react apps.
- Designed with mobile-first in mind, it provides a very up-to-date design philosophy right out-of-the-box.
- Flexbox layout with the Box and Flex components as primitive components for you to extend.
- Minimal footprint. Remember I said it was a tiny library? Well, it sits at about 4KB, what more can you ask of that?
2. Ant-design components
In contrast to Rebass, which was a very basic and minimalistic set of extensible components, Ant-design components provides a fully-fledged list of over 50 customizable components that you can use to create a beautifully crafted application.
But the catch here is that on top of that, these components were all crafted based on a design language developed by the creators of this library (which by the way, it’s just one of the many forms their design philosophy takes, you can find it also as a set of Axure files or even an Angular and Vue-based versions as well).
I encourage you to go and review their Design Language philosophy which essentially explains their thinking behind every aspect of the components. It’s very detailed and explains the why behind every design choice (i.e spacing between components, text alignment on user input and so on).
To top it all out, this set of components has over 53k stars in GitHub and over 6k weekly downloads of their NPM version (which might or might not be out of date, so stick to downloading it directly from GitHub if you can).
3. React bootstrap
Remember the good old bootstrap library? It was actually a mix of CSS and JS files, which allowed you to easily add pre-styled and pre-programmed UI components.
What better match, then, than bootstap and react? This particular library takes care of bridging the gap between the old and the new ways by bringing the power of React to an already powerful library.
Everything you could do with Bootstrap you can do it with this alternative, the only difference, is that you’ll be following the React components pattern.
4. Material UI
The folks from Ant-design created their own design language and implemented their react components based on it. Google on their own side, created their own design language called Material Design, which is based on cards, grid-based layouts and responsive animations.
In turn, the Material-UI library implements Google’s design language in a way that you can make use of it on your react-based projects.
The quality and length of the documentation created for this library is also something that should be noted. After all, you need to understand how to use it, and the more features it packs, the more problems you’ll run into, so having a very extensive and well thought out documentation is very important.
Finally, another very big selling point, is that instead of just giving you the tools to create your own site, they offer you a list of themes you can chose from. This comes in handy especially if you’re on the design-challenged side of front-end development. Mind you, some of the best ones are not free, but there is nothing stopping you from grabbing a free one and extending it to get the right look & feel you’re after. So take a look!
With all that being said, it’s no wonder why this project has over 52k stars on GitHub and over 800k downloads per week on NPM. If you’re looking for a complete react-compatible theme for your website ,think about this option and test it out before you make up your mind.
5. React Spinner
Have you heard the phrase “sometimes, less is more”? This is the perfect example of that. React Spinner, unlike the previous options I’ve covered, isn’t interested in the overall look of your application, or how is the internal architecture designed. Instead, it cares about one thing and one thing alone: loading spinners (or loading indicators).
This might not be one of the most popular projects out there, but it’s definitely one that packs as punch. If you’re looking to add a way for your users to understand something’s happening, this library provides you with over 20 react-compatible loading indicators.
Considering this library gets around 69k downloads every week from NPM and over 1k stars in GitHub, I think it’s safe to assume it not only is useful, but also that the community itself is actively using it.
6. Semantic UI React
Semantic UI is a jQuery-based library, which adds extra functionality to your pipeline. Think bootstrap but with focus on the semantics of UI development.
The problem with it, is that it’s not 100% react-compatible and here is where Semantic UI React comes into play.
Now, thanks to the added compatibility with React, you’ll use JSX code, to directly define the components and bind it with its React Component code. I other words, you don’t need to worry about correctly selecting the right element and adding the code, the reactive approach simplifies that considerably.
Grommet is yet another component library intended to help you in the task of creating your own websites simply by mixing and matching parts. That being said, this one has a strong focus on accessibility (by providing features such as keyword navigation, screen reader tags and so on), responsiveness and theming.
The design kit comes in different flavors such as Sketch for MacOS (seen in the screenshot below), Adobe XD and more.
Finally, the icon set can be seen in full on their site, but the image below shows how easy it is to install them into your project and add them to your code.
And to continue with the list of component libraries, Gestalt was developer by Pinterest and follows their internal design lenguage. Just like Material UI and Ant-Design follow other design languages, Gestalt was created to help streamline communication between designers and developers by enforcing a whole lot of pre-defined components.
Mind you, they’re not particularly pretty, I mean, have you seen the UI of Pinterest? But if you’re working on a prototype or want a way to easily get your devs and designers in-line, this is a very good option.
In GitHub, the library has over 3.3k stars but is not that popular on the NPM community with barely 800 downloads a week.
9. Fabric React
Yet, another library built by one of the big players, this time it comes from Microsoft. That’s right, Fabric React can help you build Office-like user experiences. This doesn’t mean you’re copying Office, mind you, but you gain access to similar behavior and graphics.
Look at the combobox shown below:
Fabric React provides compatibility with Desktop, Android and iOS devices and it’s used by sites such as Office 365, OneNote, Azure DevOps and others.
Again, when it comes to react component libraries, going with the ones that actually follow a design language (such as this one, which follows Microsoft’s Office Design Language) makes a lot more sense, since there should be a strong design logic behin them. So, if you’re after creating a web app with office-like UI, consider taking a look at this one.
Ofcourse, why would I be mentioning this here if it didn’t have any React bindings? I wouldn’t, really, so yes, there are react bindings you can use to simplify the integration of Onsen into your React projects.
If you’re after a mobile-first application, consider going with Onsen UI, it will give you the ability to create robust UI experiences, with minimum effort and out-of-the-box compatibility with the major platforms.
11. React Virtualized
Much like the React Spinner project, React Virtualized is meant to solve a single problem: efficiently rendering lists and tabular data in your pages. I know what you’re thinking: how hard can it be to render a table? Or a simple dropdown list? But what happens when your dropdown has over 1k elements, or when you’re trying to render 100 columns on a single table?
Those edge cases and others are the ones this particular project is attempting to tackle.
Their website has a very simple, yet powerful demo you can play around with and understand the power this library brings to the mix. Change the numbers around and add copious amount of elements to your lists and see how easy it can adapt. Then think about how much code you’d have to write to make your own lists as flexible and then download React Virtualized.
Remember when I said OnsenUI was a mobile-first components library? Well, Blueprint is definitely NOT the same. They say so right on their website, this project is focused on developing data-intensive desktop applications that run on modern browsers (including, for some reason IE11).
With this library you have access to components such as DateTime pickers, different types of dropdowns (including ones with auto-suggest while you type), highly interactive tables (here is where the data-intensive part comes into play) and a host of over 300 icons for all your graphic needs.
This library was built by the team at Palantir, company that focuses on creating ways for users to easily interact with and browse through data, which explains why Blueprint is meant for such applications.
Keep that in mind if you’re building something that needs to deal with a lot of data, you might benefit from using something like React Virtualized if you’re just trying to show the data but if you need a bit more, then consider taking a good look at Blueprint.
13. React Desktop
Finally, to close the review of these 13 react component libraries for 2020, I want to tell you about React Desktop. This project is unique in this list because it’s the only one that tries to mimick the desktop experience for the web.
Take a look at the following screenshots to understand what I mean by that.
The GitHub repo for this library has over 8.5k stars which is amazing for an indy effort and although it might look like a great idea on paper (thus the number of stars) in practices it might not have gotten the track it deserves since it’s only being downloaded just over 600 times a week.
If you’re looking for an easy way to develop desktop applications using web technologies, I highly recommend doing so with React Desktop and Electron.js.
That was the last of the 13 react-related tools you’ll probably want to know about and use (maybe?) in 2020. Did you learn about one that you might find useful? Has it been a complete waist of your time?
Just make sure to let me know down in the comments which one is your favorite and if you’re using anything else which I haven’t covered (there are so many options out there, it’s really hard to pick the right ones!).
Otherwise, thanks for reading and see you on the next one!