React

Per integrare mdui con React, inizia seguendo i passaggi sulla pagina di installazione.

Note

Quando usi mdui in un ambiente React, tieni a mente alcune cose. Queste considerazioni derivano dai vincoli generali dei Web Component e non sono specifiche di mdui.

Binding degli Eventi

React non supporta nativamente gli eventi personalizzati. Pertanto, per utilizzare gli eventi forniti dai componenti mdui, devi ottenere un riferimento al componente utilizzando l'attributo ref. Tale riferimento può quindi essere utilizzato per aggiungere listener di eventi.

Ecco un esempio di gestione degli eventi dei componenti mdui in 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('l'interruttore è stato attivato/disattivato');
    };

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

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

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

export default App;

Dichiarazioni dei Tipi TypeScript per JSX

Se stai usando mdui in file TypeScript (.tsx), è importante includere le dichiarazioni dei tipi TypeScript. Puoi farlo importando i file di dichiarazione dei tipi di mdui nel file .d.ts del tuo progetto:

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