React

React で mdui を使用する場合、インストール ページの手順に従ってインストールを完了するだけで済みます。

注意事項

React で mdui を使用する場合、いくつかの制限があります。これらの制限は、React で Web Components を使用する際の一般的な制限であり、mdui コンポーネントライブラリ自体の制限ではありません。

イベントバインディング

React はカスタムイベントをサポートしていないため、mdui コンポーネントが提供するイベントを使用する際は、まず ref 属性を使用してコンポーネントの参照を取得する必要があります。

以下は、React で mdui コンポーネントのイベントを使用する例です：

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;

JSX TypeScript 型宣言

TypeScript ファイル（.tsx）で mdui を使用する場合、TypeScript の型宣言を追加する必要があります。プロジェクトの .d.ts ファイル内で手動で mdui の型宣言ファイルを参照する必要があります：

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