前置き
タイトルそのままの話です。
上がってきたデザインを再現できないからUIライブラリを使えないとか、UIライブラリの見た目を無理やりカスタムすることになって辛くなったりなんかから解放されたいので、機能のみを提供してくれるヘッドレスのUIライブラリを使ってみました。
その感想です。
使ったのはHeadless UIで、 スタイリングはTailwind CSSで行いました。
Headless UI
コンポーネント数は少ないものの、comboboxやform回り、transitionのコンポーネントがあるので、複雑なUIが無ければ何とかなります。例えばモーダルコンポーネントそのものはありませんが、Transitionを使用して作れます。 ReactでもVueでも使えるのも良いところ。
個人的にTransitionが便利で良いなと思っています。
良い所ばかりかというと、もちろんそうでもなく痒いところはありました。
例として…
- Selectコンポーネントに直接defaultValueを渡せない。
- → value ＆ onChange指定で解決しました。
- RadioとCheckboxは react hook form と合わせて使うときは値の持ち方に注意が必要。
- → 今回はcheckboxとradioのコンポーネントは自作して解決しました。
スタイリング
Tailwind CSSでのスタイリング自体の難点はあるものの（classNameが冗長になりやすいとか）
機能と見た目が分離していることで、作業しやすさが上がったと感じたので良かったです。
他のUIライブラリ
全体の感想としては中々よかったので、他のヘッドレスUIライブラリも気になるところです。一番使われてそうなのはRadixUIのようですが、Adobeが開発しているReact AriaがDatePickerも用意されていて一番試してみたいです。使ったらまたブログのネタにしようと思います。