Headless Component開発をはじめよう (Headless UI + React Spectrum)

はじめに この記事ではライブラリを活用したHeadlessなReact Component開発について紹介します。 Not Headless Component Headless Component の紹介の前にHeadless ComponentではないComponentとはなんでしょうか。 ReactでComponent を作成する際に Material-UIやAnt Designを使ったことがある人も多いのでは多いのではないでしょうか。 これらのライブラリは<Button />や<Menu />といったスタイル付属のReactコンポーネント集になっています。 自前でスタイルを書かずに使えるので便利ではあるのですが以下のような欠点があります。 細かい見た目の調整が難しい。 ライブラリにもよるのですが、細かい調整が難しいものが多いです。 例えばAnt DesignのButtonコンポーネ

[clash_m45]

これから来そう

[d4-1977]

Headless UI ？だったけれど、Headlessって、人が操作しない意味があって、人が操作する部分を持たない、振る舞いだけを持ってますよ、ってことだったのかな。