Radix UIの使い方・最新動向
headless uiコンポーネント・Radix UIを紹介します。
追記（2022/7/27）
2022/7/21をもってRadix UIがメジャーリリースが公開され、React 18に完全対応しました。
こちらで、改めてRadix UIの紹介をしています。
Radix UIとは
Radix UIは、Next.jsのVercel社も採用しているheadless uiコンポーネントです。
Why waste time reinventing UI components?
Radix UIのサイトにアクセスすれば真っ先にこのメッセージが目に入ります。車輪の再開発を徹底的に排除してくれるのがRadix UIです。
なぜRadix UIなのか
「なぜRadix UIなのか」という疑問に関しては、こちらの記事の解答が的確です。
Radix UIを使ってみる
早速、使い方を見ていきましょう。
React 17環境でお試しください(バージョン対応に関しては後述いたします)。
基本的な流れ
公式の手順を踏みましょう。
といっても、難しい予備知識は必要ありません。
- 欲しいコンポーネントをインポート
- スタイリング
- 使う
以上になります。通常のコンポーネント開発から機能の実装やアクセシビリティ対応がごっそり必要なくなりましたね。
各コンポーネントのページには、使い方から実装例まで詳しく紹介されています。実装例に手を少し加えるだけでリッチなコンポーネントが出来上がるので、積極的に利用しましょう。
公式のデザインシステムが使える
実装例からもなんとなく察しがつくかもしれませんが、Radix UIは本当にスタイルが当たっていません。
最低限のスタイリングが欲しいという方は、公式のデザインシステムの利用を検討してください。
こちらをインポートしてお使いください。
npm i @modulz/design-system
必要最低限のスタイルがついたコンポーネントが一式再配布されているので、開発しやすくなるかもしれません。
各コンポーネントの見た目や挙動に関しては、こちらを参考にしてください。
バージョン対応に関して
バージョン対応に関して留意すべき点があります。
結論
React 18に正式対応はしていませんが、RC版ならReact 18で利用可能です。また、@modulz/design-systemはReact 18に対応していません。
React 18対応はしてる？
React 18対応はだいたい完了しているみたいです。
しかし、RC版に限られます。Popoverのpackage.jsonを貼ります。
他のコンポーネントも似たような感じです。
リリースノートを見てみると
公式サイトのリリースノートは2022/2/28で止まっています。
しかし、現在「全コンポーネントのReact 18対応」が明記されたリリースノートの編集が進行中です。
これが公開されたら、正式なReact 18対応が完了したことになるでしょう。
@modulz/design-systemは？
React 18に対応しておりません。最終更新が半年前で途絶えています。
そもそも、公開向けのものではなさそうなので、今後も期待はできません。代替手段の登場に期待したいです。
あとがき
Radix UIの紹介でした。
「最終更新1日前」ということがざらにあるのが、Radix UIです。Beta版で公開されているコンポーネントや、近日公開になっているコンポーネントもあり、今まさに開発中という感じです。
@modulz/design-systemが公開されていることは、最近になってようやく知ったことでした（それまで、design-systemのリポジトリからコードをパクって再開発はしておりました）。Radix UIの利用を推し進める要因になりそうなので共有しました。が、後半の内容もあって、返って印象を悪くしてしまったかもしれないですね。
Radix UIを進める立場でこの記事を書いていますが、利用はもう少し待ったほうがいいかな、というのが正直なところです。
とはいえ、便利なのでぜひ使ってみてください。
Discussion