React

Używając mdui w React, wystarczy postępować zgodnie z instrukcjami na stronie Instalacja.

Uwagi

Używając mdui w React istnieją pewne ograniczenia. Są to ogólne ograniczenia dotyczące używania Web Components w React, a nie ograniczenia samej biblioteki mdui.

Obsługa zdarzeń

Ponieważ React nie obsługuje zdarzeń niestandardowych, podczas korzystania ze zdarzeń dostarczanych przez komponenty mdui należy najpierw uzyskać referencję do komponentu za pomocą atrybutu ref.

Poniżej znajduje się przykład użycia zdarzeń komponentów mdui w 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('przełącznik został przełączony');
    };

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

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

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

export default App;

Deklaracje typów TypeScript dla JSX

Jeśli używasz mdui w plikach TypeScript (.tsx), musisz dodać deklaracje typów TypeScript. Musisz ręcznie zaimportować plik deklaracji typów mdui w pliku .d.ts projektu:

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