React

Ao usar mdui no React, basta seguir as instruções de instalação na página Instalação.

Notas

Existem algumas limitações ao usar mdui no React. Essas limitações são gerais ao usar Web Components no React, não específicas da biblioteca de componentes mdui.

Vinculação de eventos

Como o React não suporta eventos personalizados, ao usar os eventos fornecidos pelos componentes mdui, você precisa primeiro obter uma referência ao componente usando o atributo ref.

Exemplo de uso de eventos de componentes mdui no 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('switch is toggled');
    };

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

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

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

export default App;

Declaração de tipos TypeScript para JSX

Se você estiver usando mdui em um arquivo TypeScript (.tsx), é necessário adicionar a declaração de tipos TypeScript. Você precisa adicionar manualmente a referência ao arquivo de declaração de tipos do mdui em um arquivo .d.ts do seu projeto:

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