Material Design 3 без зависимостей: React-библиотека с CLI и документацией

TL;DR: React-material-3-pure — это минималистичная реализация Material Design 3 без runtime-зависимостей, с CLI для копирования компонентов прямо в ваш проект и pixel-perfect анимациями. Библиотека предлагает 9 ключевых компонентов с SSR-поддержкой и ThemeProvider для управления темами.

Введение: зачем ещё один Material Design?

В экосистеме React уже существуют MUI и Material-UI, но они привносят значительный bundle size и сложность. Альтернатива — react-material-3-pure — предлагает принципиально иной подход:

// После инициализации через CLI
import { Button } from './components/m3/Button';

function App() {
  return <Button variant="filled">Click Me</Button>;
}

Ключевые преимущества:

Zero-dependency: только React и CSS Modules
CLI-инструментарий для копирования компонентов
Pixel-perfect реализация анимаций и состояний

Архитектурные решения

1. Shadcn-style подход

Вместо установки через npm-пакет, компоненты копируются прямо в ваш проект:

npx m3-pure init      # Инициализация структуры
npx m3-pure add Button # Добавление компонента

Это даёт:

Полный контроль над кодом
Возможность кастомизации
Отсутствие версионных конфликтов

2. Реализация ripple-эффекта

Кастомный хук useRipple реализует аутентичный Android-эффект:

function useRipple() {
  const [ripples, setRipples] = useState([]);

  const onClick = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    setRipples([...ripples, { x, y, key: Date.now() }]);
  };

  return { ripples, onClick };
}

3. ThemeProvider

Управление темами через CSS-переменные:

:root {
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
}

[data-theme="dark"] {
  --md-sys-color-primary: #D0BCFF;
}

Практическое применение

Интеграция с Next.js

Благодаря SSR-поддержке, библиотека идеально работает с App Router:

// app/layout.tsx
import { ThemeProvider } from './components/m3/ThemeProvider';

export default function RootLayout({ children }) {
  return (
    <ThemeProvider defaultTheme="system">
      <html lang="en">
        <body>{children}</body>
      </html>
    </ThemeProvider>
  );
}

Кастомизация компонентов

Поскольку компоненты лежат в вашей кодовой базе, их легко модифицировать:

// components/m3/Button.tsx
export function Button({ children, variant = 'filled' }) {
  // Ваши кастомные правки
  return (
    <button className={`${styles.button} ${styles[variant]}`}>
      {children}
    </button>
  );
}

Заключение: когда выбирать react-material-3-pure?

Эта библиотека — отличный выбор, если вам нужно:

Минимальное воздействие на bundle size
Полный контроль над UI-компонентами
Pixel-perfect соответствие Material Design 3
Простота кастомизации

Однако, если вам нужны сложные компоненты вроде DataGrid, стоит рассмотреть более комплексные решения. Автор активно развивает проект и принимает feedback — какие компоненты вы бы хотели видеть в следующих версиях?

Источник: https://www.reddit.com/r/reactjs/comments/1rauibn/i_built_a_zerodependency_pixelperfect_material/