破壊的変更がメジャーバージョンの上昇なしに追加される可能性があります。@camome/*
パッケージをアップデートする際は
changelogs
を参照して、破壊的変更の影響を受けていないか確認してください。
Camome UI とは
Camome UI は React コンポーネントライブラリであり、CSS フレームワークでもあります。
特徴
軽量なバンドルサイズ
例えば @mui/material@5.11.6 の Button は単体で16.9KBあり、それに Emotion や ThemeProvider も加わります。
それに対して Camome UI の Buttonは単体で 1.42KB(CSS 含む)と軽量であり、それにグローバル CSS の 4KB が加わります。
Camome UI は配布パッケージ内で CSS Modulesをインポートしており、bundlephobiaなどでは計算してくれないようなので独自に計測しています。
CSS ファースト & JS ランタイムなし
Camome UI はスタイリングに CSS Modules を使用しているため、Emotion や Styled Components のようなスタイリングのためのランタイムの負荷がありません。
また、イベントハンドラや useEffect を一切使用していないため、後述するようにピュアな CSS フレームワークとしても使用可能です。Menu や Tab のような複雑な UI についてはヘッドレスUIライブラリとの統合を検討してください。
ダークモード & カスタムテーマ
デフォルトでダークモードに対応しています。また、テーマをカスタマイズすることも可能です。詳細は テーマのカスタマイズ を参照してください。
スタイルの確実なオーバーライド
CSS Modules の欠点として「スタイルのオーバーライドがしにくい」ということがあります。例えば、Camome UI のすべてのコンポーネントは className prop を受け取るようになっており、これを clsxでデフォルトのクラス名と結合しています。結果として class="Button custom-class" のような属性が付与されますが、普通であればこのときに後者のクラスが勝つという保証はありません。これは問題です。
しかし、Camome UI は CSS Cascade Layers をサポートしているため、確実にオーバーライドできます。詳しくは コンポーネントのオーバーライド を参照してください。
アクセシブル
完璧とはいえませんが、アクセシビリティには可能な限り注意が払われています。
例えば Switch は CSS のみで実装されていますが、それでもキーボードによるフォーカスや切り替えが可能ですし、Accordion も <details /> エレメントを使うことでクライアントサイド JavaScript なしでの開閉に対応しています。また、各 <input /> 系のコンポーネントは <FormField /> によって適切な label や aria-describedby 属性を手軽に設定できるようになっています（参照: フォーム）。
アクセシビリティ上の問題を発見した場合は Issues へ報告をお願いします。
イジェクト可能 & ロックインなし
Camome UI の中身は「React コンポーネント + CSS Modules + theme.css」でしかないので、自身のコードベースにコピーペーストするだけで簡単にイジェクト可能です。
フレームワーク依存なし
React ライブラリとしての使用を第一に考えられていますが、バンドル済みの CSS をインポートすることで、Bootstrap のような CSS フレームワークとしても使用できます。React のエコシステムに依存しているわけではないので、Vue や Svelte のような別のフレームワークに移植することも容易なはずです。
<head> <link href="https://unpkg.com/@camome/system@latest/dist/theme.css" rel="stylesheet" /> <link href="https://unpkg.com/@camome/core@latest/dist/components.css" rel="stylesheet" /></head><body> <button class="Button Button--primary Button--soft">Click me</button></body>ロードマップ
- Toast
- Slider (非ネイティブ)
- コンポーネントブロック
- RTL 対応