React

При использовании mdui в React достаточно выполнить шаги по установке.

Примечания

При использовании mdui в React существуют некоторые ограничения. Эти ограничения являются общими для использования Web Components в React, а не ограничениями самой библиотеки mdui.

Привязка событий

Поскольку React не поддерживает пользовательские события, при использовании событий, предоставляемых компонентами mdui, необходимо сначала получить ссылку на компонент с помощью атрибута ref.

Ниже приведен пример использования событий компонентов mdui в React:

import { useEffect, useRef } from 'react';
import 'mdui/mdui.css';
import 'mdui/components/switch.js';

function App() {
  const switchRef = useRef(null);

  useEffect(() => {
    const handleToggle = () => {
      console.log('switch is toggled');
    };

    switchRef.current.addEventListener('change', handleToggle);

    return () => {
      switchRef.current.removeEventListener('change', handleToggle);
    };
  }, []);

  return <mdui-switch ref={switchRef}></mdui-switch>;
}

export default App;

Объявления типов TypeScript для JSX

Если вы используете mdui в файлах TypeScript (.tsx), необходимо добавить объявления типов TypeScript. Вам нужно вручную добавить в файл .d.ts вашего проекта ссылку на файл объявлений типов mdui:

/// <reference types="mdui/jsx.en.d.ts" />