Material Plus

Об этом проекте

Material Plus — библиотека компонентов React, которая реализует Material Design 3 напрямую, а не оборачивает чужую готовую реализацию, поэтому её цветовые роли, типографская шкала и формы — те самые, что названы в спецификации. Она добавляет ту груду компонентов, которую проект на Material в итоге всё равно пишет сам: поле, правильно переживающее ввод восточноазиатскими методами, обёртку для значков, согласную с вашим собственным набором, — извлечённые, задокументированные и покрытые тестами. Кроме того, она выходит за рамки спецификации там, где это нужно приложениям: это расширенные версии компонентов, названных в Material, а также графики, таблица данных и палитра команд, которых Material не называет вовсе.

Тема задаётся одной строкой: задайте исходный цвет, и все цветовые роли последуют за ним так же, как Material выводит схему из одного цвета. Ничто в библиотеке не действует на уровне страницы — ни сброса стилей, ни провайдера, ни глобальных правил — и она читает системные токены Material, которые страница уже несёт. Проект, уже работающий на Material, сохраняет свою настройку и получает недостающие компоненты. Ввод на корейском, японском и китайском переживает всё, что обработчик изменений делает со значением, — а это та ошибка, которую большинство полей Material тихо носит в себе.

Пакет только в ESM, с объявлениями TypeScript, и по-настоящему поддаётся tree shaking: один компонент — 3,8 КБ в gzip против 130,6 КБ для всех ста двадцати с лишним, и таблица стилей делится так же. Он работает внутри серверного компонента Next.js без единой настройки, разрешается в любом крупном сборщике, а переводы принимает модулем, переданным один раз при запуске.

Возможности

• Сайт документации

• Типы TypeScript

• Несколько языков

• Проверено тестами

• Доступность из коробки

• Тёмная тема

• Поддержка tree shaking