React

Para usar mdui en React, solo necesitas seguir los pasos de la página de instalación para completar la instalación.

Notas importantes

Al usar mdui en React, existen algunas limitaciones. Estas limitaciones son generales al usar Web Components en React, no son limitaciones específicas de la biblioteca de componentes mdui.

Enlace de eventos

Como React no admite de forma nativa los eventos personalizados, para usar los eventos de los componentes de mdui primero debes obtener una referencia al componente con el atributo ref.

A continuación se muestra un ejemplo de cómo usar eventos de componentes de mdui en 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('el switch ha cambiado de estado');
    };

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

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

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

export default App;

Declaración de tipos TypeScript para JSX

Si usas mdui en un archivo TypeScript (.tsx), necesitas añadir la declaración de tipos. Importa manualmente el archivo de tipos de mdui en el archivo .d.ts de tu proyecto:

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