React- & Next.js-Leitfaden

Integrieren Sie das Widget in Ihre React-Anwendung mittels einer dedizierten Komponente. Dies sichert korrektes Lifecycle-Management und verhindert Memory Leaks oder Hydration Mismatches.

✓

Lifecycle Sicherheit

Bereinigt das Skript beim Unmounten.

✓

Typensicherheit

Vollständig typisiert mit TypeScript Props.

✓

SSR Kompatibel

Funktioniert mit Next.js und Remix.

Komponenten Code

Zurück zum Konfigurator

import { useEffect, useRef } from 'react';

export function CalendarWeekWidget() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Load the widget script
    const script = document.createElement('script');
    script.src = 'https://thecalendarweek.com/embed.js';
    script.async = true;
    
    script.onload = () => {
      // Initialize widget after script loads
      if (window.TheCalendarWeek) {
        window.TheCalendarWeek.init();
      }
    };
    
    document.body.appendChild(script);

    return () => {
      // Cleanup on unmount
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div
      ref={containerRef}
      className="tcw-embed"
        data-design="dashboard"
        data-variant="weekdays"
    />
  );
}

Hinweis: Wenn Sie Next.js App Router nutzen, stellen Sie sicher, dass dies eine Client Component ist, indem Sie 'use client' ganz oben in der Datei hinzufügen.