React

Při používání mdui v Reactu stačí postupovat podle kroků na stránce Instalace.

Poznámky

Při používání mdui v Reactu existují určitá omezení. Tato omezení jsou obecná omezení používání Web Components v Reactu, nikoli omezení samotné knihovny komponent mdui.

Vazba událostí

Protože React nepodporuje vlastní události, je při používání událostí poskytovaných komponentami mdui nutné nejprve získat referenci na komponentu pomocí atributu ref.

Následuje příklad použití událostí komponenty mdui v Reactu:

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('spínač byl přepnut');
    };

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

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

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

export default App;

TypeScript deklarace pro JSX

Pokud používáte mdui v TypeScriptových souborech (.tsx), musíte přidat deklaraci TypeScript typů. Je nutné ručně importovat soubor s deklaracemi typů mdui do souboru .d.ts vašeho projektu:

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