@iccandle/widget-web-trading 0.0.1 → 0.0.2

package/README.md

@@ -50,16 +50,55 @@ function TradingPage() {
 
 ### Embed mode (host-owned chart)
 
-Pass an existing TradingView `chartWidget` to render trading panels around your chart instead of the built-in chart:
+When your app already owns the TradingView widget instance, pass it via `chartWidget` and render your chart mount point as `children`. The widget will wire up order lines, symbol sync, and trading panels around your chart instead of creating its own.
 
 ```tsx
-<WebTradingWidget
-  baseUrl="https://your-api.example.com"
-  token={token}
-  chartWidget={existingTvWidget}
-/>
+import { useEffect, useRef, useState } from "react";
+import { WebTradingWidget } from "@iccandle/widget-web-trading";
+import "@iccandle/widget-web-trading/style.css";
+
+function TradingPageWithHostChart() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [chartWidget, setChartWidget] = useState<object | null>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || !window.TradingView) {
+      return;
+    }
+
+    const widget = new window.TradingView.widget({
+      container,
+      library_path: "/charting_library/",
+      // datafeed, symbol, interval, etc.
+    });
+
+    widget.onChartReady(() => {
+      setChartWidget(widget);
+    });
+
+    return () => {
+      setChartWidget(null);
+      widget.remove();
+    };
+  }, []);
+
+  return (
+    <div style={{ height: "100vh", width: "100%" }}>
+      <WebTradingWidget
+        baseUrl="https://your-api.example.com"
+        token={token}
+        chartWidget={chartWidget}
+      >
+        <div ref={containerRef} style={{ height: "100%", width: "100%" }} />
+      </WebTradingWidget>
+    </div>
+  );
+}
 ```
 
+`chartWidget` must be the TradingView Charting Library widget instance from your host app. Pass `children` with the DOM element the chart is mounted into — omitting `children` leaves the chart slot empty.
+
 ### `ChartNewsOrdersOverlay`
 
 A lighter overlay for news-style layouts: