参照したページ
まとめ記事
コンポーネントベース
hooksベース
はじめに
業務で新規構築をする機会があり、何かベースになるUIライブラリは無いかと比較しています。
コンポーネント一覧
まずはコンポーネントベースのライブラリについて調査してみます。
2023年4月14日時点で公式ページに掲載されているコンポーネントを一覧かしてみました。
RadixのUtilitiesに分類されているコンポーネントのうち、非推奨[Deprecated]になっているものもあるのでそれらは使わない方がよさそうです。
公式ページで最新情報をご確認ください。
| Radix | MUI Base | Headless UI |
|---|---|---|
| Accordion | Button | Menu (Dropdown) |
| Alert Dialog | Input | Listbox (Select) |
| Aspect Ratio | Select | Combobox (Autocomplete) |
| Avatar | Slider | Switch (Toggle) |
| Checkbox | Switch | Disclosure |
| Collapsible | Badge | Dialog (Modal) |
| Context Menu | Snackbar | Popover |
| Dialog | Menu | Radio Group |
| Dropdown Menu | Table Pagination | Tabs |
| Form | Tabs | Transition |
| Hover Card | Click-Away Listener | |
| Label | Focus Trap | |
| Menu Bar | Form Control | |
| Navigation Menu | Modal | |
| Popover | No SSR | |
| Progress | Popper | |
| Radio Group | Portal | |
| Scroll Area | Textarea Autosize | |
| Select | ||
| Separator | ||
| Slider | ||
| Switch | ||
| Tabs | ||
| Toast | ||
| Toggle | ||
| Toggle Group | ||
| Toolbar | ||
| Accessible Icon | ||
| Announce [Deprecated] | ||
| Direction Provider | ||
| Id Provider [Deprecated] | ||
| Polymorphic [Deprecated] | ||
| Portal | ||
| Slot | ||
| Visually Hidden |
今回自分が選定する基準について考える
Radixはコンポーネントを個別にインストールするようになっているので、MUI Base か Headless UI を丸ごとインストールしたうえで、追加で必要なものをRedixで補うようにしようかと考え中ですが、もうちょっと各ライブラリの理解を深めたり、作ってみながら考える必要がありそう。
- レスポンシブに対応している必要がある。
- Combobox (Autocomplete) はHeadless UIだけにある？RadixやMUI Baseには？他のライブラリで代替できそう？
- Headless UIのTransitionはアニメーションをさせるときに便利そう。他のライブラリで代替できそう？
- CSSの上書きがどの程度やりやすいか。
- Switchが欲しい。Switchは3つ全てにある。
- Radioが欲しい。RadixとHeadless UIにある。
- あああああ
上記したうち、1, 2, 3がクリアできれば、今回はHeadless UIを使う必要は無さそう。
レスポンシブに対応していることの確認をMUI BaseとRadixにしたうえで、MUI Baseの動作確認を重点的にやって、Radixと共存できそうか試していくのがよさそうかなー。
もうちょっと調査して考える必要がありそう。
