Material Plus

このプロジェクトについて

Material Plus は、既存の実装をラップするのではなく Material Design 3 の仕様を直接実装した React コンポーネントライブラリです。だからカラーロールもタイプスケールも形も、仕様が定めたものそのものです。そこに加わるのは、Material のプロジェクトなら結局は自分で書くことになる部品の山です。日本語の変換入力をきちんと扱う入力欄、手持ちのアイコンセットと噛み合うアイコンラッパーといったものを取り出し、文書とテストをつけました。アプリケーションが必要とするところでは仕様の先にも踏み込みます。Material が定めるコンポーネントを拡張した版と、Material がまったく定めていないチャート、データテーブル、コマンドパレットです。

テーマは一行です。ソースカラーを一つ決めれば、Material が配色を生成するのと同じやり方で、すべてのカラーロールが追随します。ライブラリの中にページ全体へ手を出すものはありません。リセットもプロバイダーもグローバルなスタイルもなく、ページがすでに持っている Material のシステムトークンを読みます。すでに Material を使っているプロジェクトは、自分の設定をそのまま保ったまま、足りない部品だけを得ます。日本語・韓国語・中国語の変換入力は、変更ハンドラーが値をどう扱っても壊れません。多くの Material の入力欄が静かに抱えている不具合です。

パッケージは ESM のみ、TypeScript の型定義つきで、本当にツリーシェイキングが効きます。一つのコンポーネントは gzip 圧縮で 3.8 kB、百二十を超えるすべてで 130.6 kB で、スタイルシートも同じように分かれます。設定なしで Next.js のサーバーコンポーネントの中で動き、主要なバンドラーすべてで解決でき、翻訳は起動時に一度渡すモジュールとして受け取ります。

機能

• ドキュメントサイトあり

• TypeScript 型定義

• 多言語対応

• テストで検証済み

• アクセシビリティ対応

• ダークモード

• ツリーシェイキング対応