---
# System prepended metadata

title: Component Library 挑選指標

---

# Component Library 挑選指標
1. Github 星星數
1. 是否支援 TypeScript
1. 是否純 React?
1. Issue 解決率
1. 是否需要動到 build tools
1. Sketch 等 UI 軟體支援度
1. 是否會跟原本的 Component 打架，互相污染環境
1. Contributors 數量
1. StackOverflow 問題總數
1. Component 數量
1. Code Example 數量
1. 黑歷史
1. API 難易度
1. 客製化程度
1. 文件詳細度

## 比較目前市面上 React Component Library

![](https://i.imgur.com/Hsn05aS.png)
![](https://i.imgur.com/e9HhcmR.png)
![](https://i.imgur.com/Khrjolv.png)

可以看到 Material UI 在過去一個月和六個月，下載數量都是最高的，緊接著是 react-boostrap, 再來是 ant-design

## 比較前幾個 Component Library

挑選前 3 個 component library 來跟 SurveyCake Component 做比較

1. Material UI
1. React Boostrap
1. Ant Design

### Github 星星數

1. Material UI **52k**
1. React Boostrap **16k**
1. Ant Design **53k**


### 是否支援 TypeScript

1. Material UI 是
1. React Boostrap 是
1. Ant Design 是

### Issue 解決率

1. Material UI **96%, 351 open, 9537 closed**
1. React Boostrap **99%, 15 open, 2334 closed**
1. Ant Design **97%, 403 open, 14247 closed**

### 是否需要動到 build tools?

需要動到 build tools 可能就必須要把 webpack, babel, jest, eslint, typescript 考慮進去

1. Material UI 否
1. React Boostrap 否
1. Ant Design **是**

### Contributors 數量

1. Material UI **1520**
1. React Boostrap **314**
1. Ant Design **940**

### Sketch 等 UI 軟體支援度

1. Material UI https://material.io/resources/
1. React Boostrap https://www.sketchappsources.com/free-source/1768-bootstrap-v4-ui-kit-sketch-freebie-resource.html
1. Ant Design https://ant.design/docs/spec/download-cn

### 黑歷史

1. Material UI 否
1. React Boostrap 否
1. Ant Design [彩蛋事件](https://zhuanlan.zhihu.com/p/53262709)

### StackOverflow 問題總數

1. Material UI **5709**
1. React Boostrap **1571**
1. Ant Design **1405**

### Component 數量

Material-UI **56**
React Boostrap **27**
Ant Design **63**

### API 難易度

Material-UI：隨插即用，不污染環境
React Boostrap：需要懂 Boostrap 才知道 Component 邏輯
Ant Design：需要調整 build tools 才能使用 theme

### 美觀程度

Material-UI **中**
React Boostrap **下**
Ant Design **上**

### 是否是純 React

1. Material UI 是
1. React Boostrap 一半是
1. Ant Design 是

### Code Example 數量

1. Material UI 很多
1. React Boostrap 中等
1. Ant Design 很多

### 客製化程度

1. Material UI 高
1. React Boostrap 要學會 bootstrap 有難度
1. Ant Design 沒有 className prop? 客製化難度會太高