Why Should You Use a React Component Library for your Project?
What is a Component Library?
A component library is a cloud-based folder that consists of all the designed/styled parts of a website or piece of software. It helps designers to work in a consistent way and becomes very time efficient when executed correctly.
It generally follows atomic design by http://atomicdesign.bradfrost.com/
What is Atomic Design?
The terminology Atomic Design is an analogy from biochemistry. It’s all about “Atoms”, “Molecules” and “Organisms”.
Atomic Design is a methodology used to create web designs.
Atoms
Molecules
Organisms
Templates
Pages
What is a React Component Library
A collection of components, organized in a meaningful manner, and often (but not necessarily) providing some way to browse and preview those components and their associated assets.”
It is the same concept but this time all the components are React compatible. They expose their API via props…
React Component Libraries on the Market…
- React Material-UI
- React-Bootstrap
- React toolbox
- React Belle
- React Grommet
- Material Components Web
- Ant Design React
- PrimeReact
- Office UI Fabric
- Blueprint JS
- React UI
- Semantic UI React
- Ring UI
- ExtReact (paid)
- Kendo React UI (paid)
- And many more…
Why a React Component Library?
- Component Libraries have tens of components ready for you out of the box.
- Most of them also include solutions for responsive layouts. No need for third party CSS or Grid libraries.
- Increased speeds in delivery plus engineer peace of mind.
- Ability to collaborate efficiently
- Staying consistent
- Customization & flexibility
If we don’t use a library then we need to create our version…
This process involves the following:
- Coding the component itself
- Writing tests for the component
- Maintaining a central Component Library and communicating with developers.
- When the component needs to be updated then all of the above needs to be updated/maintained.
Here is what happens in real life…
- We never create a library that is as feature rich as the libraries out there, our version always stays as MVP…
- We can never think of all the scenarios that the component might require so we limit ourselves with basic functionality and then complain to Product Managers when they want to expand the functionality of the component.
- Libraries out there are followed by hundreds and sometimes thousands of developers who are finding and fixing bugs daily, adding new functionality, making sure that components are browser compatible and keeping the tests updated
- With limited engineers, we can never achieve the same power. We incur technical debt and pay with interest in the future.
- Most likely we are already using third-party components for select boxes, calendars etc. This creates chaos, UI inconsistency, incompatible version support and dependencies to multiple libraries.
- The person who coded the table component gets a better offer in six months and now rest of the team ends up decoding his/her code.
What to look for when picking a React Component Library?
- Library needs to be extensive. Components should cover 90% of the app scenarios. That is why I believe React-Bootstrap is not a good option.
- It should not limit your UI design guides. Material UI pushes you to use flat colors, flat design principle. It may not be suitable for every project.
- Should have a decent size of followers/community on GitHub.
- Should support dynamic imports, Sass/Less…
- Should easily be themed.
My Two Picks Are:
- Stars (appreciation / usage): 26,503
- Dependencies (bloat): 42
- Dependents (usage): 615
- Last Updated: 3 days ago
- NPM downloads: 53,335 / week
- Stars (appreciation / usage): 6,459
- Dependencies (bloat): 5
- Dependents (usage): 263
- Last Updated: today
- NPM downloads: 40,265 / week
My final pick is: Ant D React
- It has a design specification called Ant Design Specification
- An enterprise-class UI design language for web applications.
- A set of high-quality React components out of the box.
- Written in TypeScript with complete defined types.
- The whole package of development and design resources and tools.
- Supports Modern browsers and Internet Explorer 9+ (with polyfills)
- Supports Server-side Rendering