React

Az mdui Reactban való használatához csak kövesse a telepítés oldal útmutatását a telepítéshez.

Figyelmeztetések

Az mdui Reactban való használatakor bizonyos korlátokba ütközhet. Ezek a korlátok a Web Components Reactban való használatának általános korlátai, nem pedig az mdui komponenskönyvtár korlátai.

Eseménykötés

Mivel a React nem támogatja az egyéni eseményeket, az mdui komponensek által biztosított események használatához először a ref attribútummal kell megszereznie a komponens hivatkozását.

Az alábbiakban egy példa látható az mdui komponensek eseményeinek Reactban való használatára:

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('a kapcsoló állapota megváltozott');
    };

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

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

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

export default App;

JSX TypeScript típusdeklaráció

Ha TypeScript fájlban (.tsx) használja az mdui-t, hozzá kell adnia a TypeScript típusdeklarációkat. Kézzel kell importálnia az mdui típusdeklarációs fájlját a projekt .d.ts fájljában:

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