1. 背景
現在NuxtからReactにリプレイス中でUIコンポーネントライブラリを調査していた為です。
NuxtではElement-UIを使用していました。
2. 条件
2.1. Datepicker
カレンダーアイコン以外をクリックしてもカレンダーを開きたい
2.2. Cascader
複数選択時にチェックボックスだけでなくラベルを選択してもチェックしてほしい
以下が主要なライブラリだと思うのでこれらの条件を満たすか比較してみました。
3. Ant Design と MUI と React-Bootstrap の比較
3.1. Datepicker
Ant-Design
条件を満たせています。
https://ant.design/components/date-picker
MUI
カレンダーアイコンをクリックしないとカレンダーが表示されなかったです。
https://mui.com/x/react-date-pickers/date-picker/
React-Bootstrap
https://react-bootstrap.netlify.app/docs/forms/overview/
LIVE EDITORのtype="email"をdateに変えて検証しました。
<Form.Control type="date" placeholder="Enter email" />
https://gyazo.com/ddf1043d20c6f42d32889efc6d7beb55
こちらもカレンダーアイコンをクリックしないとカレンダーが表示されなかったです。
3.2. Cascader
Ant-Design
条件を満たせています。
https://ant.design/components/cascader#cascader-demo-showcheckedstrategy
MUI
Cascaderがないので作る必要があります。
MUI XのTree ViewとCheckboxで実現できるらしいです。
React-Bootstrap
cascaderに関する情報が見当たらなかったです。
4.最後に
- Ant-Designに軍配が上がってるかなと思いました
- Ant-DesignはMUIよりカスタマイズ性が低いという記事を見かけたのでもう少し調査したいです