diff --git a/components/TradingViewWidget.tsx b/components/TradingViewWidget.tsx
index 51aabb4..95a0cda 100644
--- a/components/TradingViewWidget.tsx
+++ b/components/TradingViewWidget.tsx
@@ -1,6 +1,6 @@
'use client';
-import React, { memo, useState, useEffect } from 'react';
+import React, { memo, useState } from 'react';
import useTradingViewWidget from "@/hooks/useTradingViewWidget";
import { cn } from "@/lib/utils";
import { Maximize2, Minimize2 } from 'lucide-react';
@@ -17,27 +17,14 @@ interface TradingViewWidgetProps {
const TradingViewWidget = ({ title, scriptUrl, config, height = 600, className, allowExpand = false }: TradingViewWidgetProps) => {
const [isExpanded, setIsExpanded] = useState(false);
- const [windowHeight, setWindowHeight] = useState(0);
-
- useEffect(() => {
- if (typeof window !== 'undefined') {
- setWindowHeight(window.innerHeight);
- const handleResize = () => setWindowHeight(window.innerHeight);
- window.addEventListener('resize', handleResize);
- return () => window.removeEventListener('resize', handleResize);
- }
- }, []);
-
- const currentHeight = isExpanded ? windowHeight : height;
const widgetConfig = {
...config,
- height: currentHeight,
width: "100%",
autosize: true,
};
- const containerRef = useTradingViewWidget(scriptUrl, widgetConfig, currentHeight);
+ const containerRef = useTradingViewWidget(scriptUrl, widgetConfig);
const toggleExpand = () => {
setIsExpanded(!isExpanded);
@@ -63,9 +50,11 @@ const TradingViewWidget = ({ title, scriptUrl, config, height = 600, className,
)}
-
+
);
diff --git a/hooks/useTradingViewWidget.tsx b/hooks/useTradingViewWidget.tsx
index 2bfe03d..f8875e0 100644
--- a/hooks/useTradingViewWidget.tsx
+++ b/hooks/useTradingViewWidget.tsx
@@ -1,36 +1,31 @@
'use client';
import { useEffect, useRef } from "react";
-const useTradingViewWidget = (scriptUrl: string, config: Record, height: number | string = 600) => {
+const useTradingViewWidget = (scriptUrl: string, config: Record) => {
const containerRef = useRef(null);
+ const serializedConfig = JSON.stringify(config);
useEffect(() => {
- if (!containerRef.current) return;
+ const container = containerRef.current;
+ if (!container) return;
// Clean up previous instance
- containerRef.current.innerHTML = '';
+ container.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 = ``;
+ container.innerHTML = '';
const script = document.createElement("script");
script.src = scriptUrl;
script.async = true;
- script.innerHTML = JSON.stringify(config);
+ script.innerHTML = serializedConfig;
- containerRef.current.appendChild(script);
+ container.appendChild(script);
return () => {
- if (containerRef.current) {
- containerRef.current.innerHTML = '';
- }
+ container.innerHTML = '';
}
- }, [scriptUrl, JSON.stringify(config), height]) // Use stringified config to avoid ref issues
+ }, [scriptUrl, serializedConfig])
return containerRef;
}
-export default useTradingViewWidget
\ No newline at end of file
+export default useTradingViewWidget