diff --git a/hooks/useTradingViewWidget.tsx b/hooks/useTradingViewWidget.tsx index 9e62726..2bfe03d 100644 --- a/hooks/useTradingViewWidget.tsx +++ b/hooks/useTradingViewWidget.tsx @@ -1,13 +1,21 @@ 'use client'; -import { useEffect, useRef } from "react"; +import { useEffect, useRef } from "react"; -const useTradingViewWidget = (scriptUrl: string, config: Record, height = 600) => { +const useTradingViewWidget = (scriptUrl: string, config: Record, height: number | string = 600) => { const containerRef = useRef(null); useEffect(() => { if (!containerRef.current) return; - if (containerRef.current.dataset.loaded) return; - containerRef.current.innerHTML = `
`; + + // Clean up previous instance + containerRef.current.innerHTML = ''; + + // Create wrapper with dynamic height support + // If autosize is true in config, we want 100% height/width + const isAutosize = config.autosize === true; + const styleHeight = isAutosize ? '100%' : `${height}px`; + + containerRef.current.innerHTML = `
`; const script = document.createElement("script"); script.src = scriptUrl; @@ -15,15 +23,13 @@ const useTradingViewWidget = (scriptUrl: string, config: Record script.innerHTML = JSON.stringify(config); containerRef.current.appendChild(script); - containerRef.current.dataset.loaded = 'true'; return () => { - if(containerRef.current) { + if (containerRef.current) { containerRef.current.innerHTML = ''; - delete containerRef.current.dataset.loaded; } } - }, [scriptUrl, config, height]) + }, [scriptUrl, JSON.stringify(config), height]) // Use stringified config to avoid ref issues return containerRef; }