React

Pour utiliser mdui dans React, suivez simplement les instructions de la page Installation.

Remarques

L'utilisation de mdui dans React présente certaines limitations. Ces limitations sont générales à l'utilisation des Web Components dans React et ne sont pas spécifiques à mdui.

Liaison d'événements

React ne prenant pas en charge les événements personnalisés, vous devez utiliser l'attribut ref pour obtenir une référence au composant.

Exemple d'utilisation d'événements de composants mdui dans 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("Le Switch a changé d'état");
    };

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

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

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

export default App;

Déclarations de types TypeScript JSX

Si vous utilisez mdui dans un fichier TypeScript (.tsx), vous devez ajouter les déclarations de types TypeScript. Vous devez importer manuellement le fichier de déclaration de types de mdui dans votre fichier .d.ts :

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