React

React'te mdui kullanırken, yalnızca Kurulum sayfasındaki adımları izleyerek kurulumu tamamlamanız yeterlidir.

Önemli Notlar

React'te mdui kullanırken bazı sınırlamalar vardır. Bu sınırlamalar, React'te Web Bileşenleri (Web Components) kullanımına ait genel sınırlamalardır, mdui bileşen kütüphanesinin kendine özgü sınırlamaları değildir.

Olay Bağlama

React özel olayları (custom events) desteklemediğinden, mdui bileşenleri tarafından sağlanan olayları kullanırken önce ref özniteliğini kullanarak bileşene bir referans almanız gerekir.

Aşağıda, React'te mdui bileşen olaylarını kullanma örneği verilmiştir:

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('anahtar değiştirildi');
    };

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

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

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

export default App;

JSX TypeScript Tip Bildirimi

TypeScript dosyalarında (.tsx) mdui kullanıyorsanız, TypeScript tip bildirimlerini eklemeniz gerekir. Projenizin .d.ts dosyasına mdui'nin tip bildirim dosyasını manuel olarak dahil etmeniz gerekir:

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