React Component Library Comparison
This is a comparison between react component libraries out there, based on how adaptable each library is to build the prototype design on https://xd.adobe.com/view/b98ef251-c459-4cbc-4cb4-4cffeae64801-cfbf/ Each component libraries will be assessed based on criteria below:
Criteria
1) Required React components
- Buttons
- Slider
- Checkbox
- RadioButton
- Switch
- DropDown
- Draggable
- Droppable
- Pop-up Container
- Tabs
2) Accessibility comparison
- ARIA
- Community support
- Importance of Accessibility to the organization
- Customizability
- Licence
3) Project state
Will be measured based on the last date for a release, if the organization responds to pull requests and issues on Git, popularity of the project.
4) Cross platform support
All the required components should be rendered without any problems when you compile react version of the prototype to Android and IOS by using Capacitor.
5) Easy of use
Will be measured based on how easy to use the library.
Component Libraries to be compared
You can also try them on https://github.com/chosww/C2LC-React-Components
Result
1) Required React components
| React-Material-Ui | React-Bootstrap | Reakit | Carbon | Grommet | |
|---|---|---|---|---|---|
| Buttons | |||||
| CheckBox | Accessible through FormCheck by specifying type | ||||
| Draggable | Need to use react-draggable to components | Not on their doc; Need to use react-draggable to components | Not on their doc; Need to use react-draggable to components | Not on their doc; Need to use react-draggable to components | Not on their doc; Need to use react-draggable to components |
DropDown | Not on their doc | ||||
Droppable | Need to use react-droppable to components | Not on their doc; Need to use react-draggable to components | Not on their doc; Need to use react-draggable to components | Not on their doc; Need to use react-draggable to components | Not on their doc; Need to use react-draggable to components |
| RadioButton | Accessible through FormCheck by specifying type | ||||
| Slider | Not on their doc | Not on their doc | The component is called RangeInput | ||
| Switch/Toggle | Accessible through FormCheck by specifying type | Not on their doc | Not on their doc | ||
| Pop-up Container | The component is called Menu | Can be implemented with DropDown | The component is called Menu | The component is called OverflowMenu | The component is called Menu |
| Tabs | The component is called Tab |
Additional Notes:
- Reakit has noticeably less number of components than the other libraries.
- Switch component of React-Bootstrap does not work with click if the component's id property is not set – though it works with keyboard interaction, when you press the spacebar.
- All Carbon components do not have default styling, you need to include CDN (<link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css"> in index.html in public directory) for the style sheet, or include individual component's style sheet from their directory.
- For Carbon component OverflowMenu, you need to include OverflowMenuItem components and Tabs component requires Tab components.
- Material-ui and Carbon throws warning when there's missing required properties in components, which makes it easy to debug, React-Bootstrap does not warn for missing properties, and Reakit crashes the application with errors.
- When react-draggable is applied to a components for React-Bootstrap, sometimes you can only drag them once and once you drop them, their position is unchangeable.
2) Accessibility comparison
| React-Material-Ui | React-Bootstrap | Reakit | Carbon | Grommet | |
|---|---|---|---|---|---|
| ARIA | |||||
| Community Support | Issues and pull requests are actively reviewed | Issues and pull requests are actively reviewed | Issues and pull requests are actively reviewed | Issues and pull requests are actively reviewed | Issues and pull requests are actively reviewed |
| Importance of Accessibility | Some components have their own accessibility section in the documentation, and accessibility is one of their priorities for their roadmap – https://material-ui.com/discover-more/roadmap/ | Accessibility by default: Each component is implemented with accessibility in mind. React-Bootstrap should have same accessibility requirements as normal Bootstrap, which follows: WCAG 2.0 (A/AA/AAA), Section 508 and similar accessibility standards and requirements – https://getbootstrap.com/docs/4.1/getting-started/accessibility/ | Strictly follows WAI-ARIA 1.1 standards – https://reakit.io/docs/accessibility/ | All Carbon components follow the IBM Accessibility Checklist which is based on WCAG AA, Section 508, and European standards – https://www.carbondesignsystem.com/guidelines/accessibility/overview/ | keyboard navigation, screen reader tags, and more. grommet provides support for W3c’s WCAG 2.1 spec out of the box. – https://v2.grommet.io/ |
| Customizability | You can customize all its components, and can even change default settings by override components' class | You can create your own class file for the components, which can be used by using "as" keyword following by component name in rendering; for an example, you can create your own button class named ButtonClass and when you are using the component in rendering, use: <Button as={ButtonClass} /> | Same as React-Bootstrap, you can create your own class file for the components, then use "as" keyword to use the customized components | Not directly to the components, but you can modify CSS properties for styles | Every components have theme property, where you can pass customized style object as a theme. <Component theme={themeObject} /> |
| Licence | MIT | MIT | MIT | Apache-2.0 | Apache-2.0 |
3) Project state
State of all the component libraries are active; actively publishing new versions, reviewing issues and pull requests. To rank popularity, as of today, October 8, 2019, Material-Ui has weekly download of 684,714 downloads, React-Bootstrap has weekly download of 431,917 downloads, Carbon has 28,315 downloads, Grommet has 11,254 downloads and Reakit has 10,274 downloads; their weekly download seems steady.
4) Cross platform support
All the components from the libraries are able to render without any problems when they are compiled as Android, and iOS by using Capacitor.
5) Easy of use
React-Bootstrap and Carbon components do not have default stylings, which requires an extra steps to load style sheets by using CDN or by import. When it comes to customizing components, Material-Ui doesn't need addition class files for each customized component like React-Bootstrap and Reakit, but requires setting object for each of them, which I think is much simpler than creating component classes. Also, as I mentioned on Additional Notes, Material-ui and Carbon are much easier to debug with its warning message that tells you what's missing. On the other hand, Reakit provides warning for missing accessibility properties. Grommet doesn't have required attributes, as attributes have default values.
To rank them based on what I found during this exploration,
- Material-Ui
- Carbon
- Grommet
- React-Bootstrap
- Reakit