5 React Component Toolkits

Have you ever built a Dropdown, Table or other component in React and felt like you were reinventing the wheel?

It turns out, you are! These common components have been built over and over again.

There are tons of one-off React components out there, but right now I’m focused on toolkits. These are large libraries of React components.

Toolkits are particularly great for prototyping because they help you put together an app quickly.

Caveat: These toolkits might not be the best thing if you have a designer handing you a design that you need match exactly. Many of them support theming, but often it is difficult to do a complete redesign.

Styling

Before I get to the list, let’s talk about how you actually use these toolkits.

All these toolkits can be installed with npm install and then used with import or require(). Usually you can import just the components you need.

Here’s the catch: to get at the styles / CSS you sometimes have to do more work. Each of these toolkits provides the styles in one or more of the following ways:

• Static File: The CSS is provided as a file that you can include on your HTML page with a <link> tag. Alternatively many Webpack configurations will allow you to 'import' the CSS so that it becomes part of your bundle.
• CSS Modules: The CSS gets automatically imported with each component, but you may have to modify your Webpack config (and you have to be using Webpack or something similar in the first place).
• Inline: The styles are inlined on the component elements, so you don’t have to do any extra work. This is easy for you, but there are performance drawbacks.

Now, on to the list!

The List

1. Material-UI