@tradecanvas/react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TradeCanvas Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,48 @@
+# @tradecanvas/react
+
+React component for [`@tradecanvas/chart`](https://www.npmjs.com/package/@tradecanvas/chart) — reactive props, ref forwarding, zero boilerplate.
+
+## Install
+
+```bash
+npm install @tradecanvas/react @tradecanvas/chart
+```
+
+`react` (>= 18) and `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { TradeCanvas } from '@tradecanvas/react'
+
+export function Chart() {
+  return (
+    <div style={{ height: 500 }}>
+      <TradeCanvas symbol="BTCUSDT" timeframe="5m" theme="dark" indicators={['rsi', 'macd']} />
+    </div>
+  )
+}
+```
+
+Streams live Binance data by default. Pass `data={bars}` for static OHLC, or `adapter={...}` for any feed (`CoinbaseAdapter`, `BybitAdapter`, `KrakenAdapter`, or your own).
+
+## Props
+
+`symbol`, `timeframe`, `theme` (`'dark'` | `'light'` | `Theme`), `chartType`, `indicators`, `data`, `adapter`, `historyLimit`, `features`, `autoScale`, `signalMarkers`, `signalMarkerStyle`, `tradeZones`, `tradeZoneStyle`, `watermarkText`, `onReady(chart)`, `onCrosshairMove`, `className`, `style`.
+
+## Imperative access
+
+```tsx
+import { useRef } from 'react'
+import { TradeCanvas, type TradeCanvasRef } from '@tradecanvas/react'
+
+const ref = useRef<TradeCanvasRef>(null)
+ref.current?.getChart()             // the underlying Chart — full API
+ref.current?.screenshot('chart.png')
+```
+
+Reach the underlying `Chart` (drawings, trading, execution adapters, plugins, drag-to-create orders, resizable panes) via `onReady` or `ref.getChart()`. See the [main docs](https://github.com/bonguynvan/tradecanvas).
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`react`),t=require(`@tradecanvas/chart`),n=require(`react/jsx-runtime`);function r(e){return!e||e===`dark`?t.DARK_THEME:e===`light`?t.LIGHT_THEME:e}var i=(0,e.forwardRef)(function(i,a){let{symbol:o=`BTCUSDT`,timeframe:s=`5m`,theme:c=`dark`,chartType:l=`candlestick`,indicators:u=[],data:d,adapter:f,historyLimit:p=500,features:m,autoScale:h=!0,signalMarkers:g,signalMarkerStyle:_,tradeZones:v,tradeZoneStyle:y,watermarkText:b,onReady:x,onCrosshairMove:S,className:C,style:w}=i,T=(0,e.useRef)(null),E=(0,e.useRef)(null),D=(0,e.useRef)(new Map),O=(0,e.useRef)({symbol:o,timeframe:s});return(0,e.useImperativeHandle)(a,()=>({getChart:()=>E.current,screenshot:e=>E.current?.screenshot(e),screenshotDataURL:()=>E.current?.screenshotDataURL()??null})),(0,e.useEffect)(()=>{let e=T.current;if(!e)return;let n={chartType:l,theme:r(c),autoScale:h,rightMargin:5,crosshair:{mode:`magnet`},features:{drawings:!0,drawingMagnet:!0,drawingUndoRedo:!0,indicators:!0,trading:!0,volume:!0,legend:!0,crosshair:!0,keyboard:!0,screenshot:!0,alerts:!0,barCountdown:!0,logScale:!0,watermark:!0,...m}};b&&(n.watermark={text:b,fontSize:48,color:`rgba(255,255,255,0.03)`});let i=new t.Chart(e,n);if(E.current=i,D.current=new Map,d)i.setData(d);else{let e=f??new t.BinanceAdapter;i.connect({adapter:e,symbol:o,timeframe:s,historyLimit:p})}return x?.(i),()=>{i.disconnectStream(),i.destroy(),E.current=null,D.current.clear()}},[]),(0,e.useEffect)(()=>{let e=E.current;if(!e||d)return;let n=O.current;if(n.symbol===o&&n.timeframe===s)return;O.current={symbol:o,timeframe:s},e.disconnectStream();let r=f??new t.BinanceAdapter;e.connect({adapter:r,symbol:o,timeframe:s,historyLimit:p}),b!==void 0&&e.setWatermark(b)},[o,s,f,p,d,b]),(0,e.useEffect)(()=>{E.current?.setTheme(r(c))},[c]),(0,e.useEffect)(()=>{E.current?.setChartType(l)},[l]),(0,e.useEffect)(()=>{d&&E.current?.setData(d)},[d]),(0,e.useEffect)(()=>{let e=E.current;if(!e)return;let t=D.current,n=new Set(u);for(let[r,i]of t)n.has(r)||(e.removeIndicator(i),t.delete(r));for(let n of u)if(!t.has(n)){let r=e.addIndicator(n);r&&t.set(n,r)}},[u]),(0,e.useEffect)(()=>{g&&E.current?.setSignalMarkers(g)},[g]),(0,e.useEffect)(()=>{_&&E.current?.setSignalMarkerStyle(_)},[_]),(0,e.useEffect)(()=>{v&&E.current?.setTradeZones(v)},[v]),(0,e.useEffect)(()=>{y&&E.current?.setTradeZoneStyle(y)},[y]),(0,e.useEffect)(()=>{let e=E.current;!e||!S||e.on(`crosshairMove`,S)},[S]),(0,n.jsx)(`div`,{ref:T,className:C,style:{width:`100%`,height:`100%`,...w}})});exports.TradeCanvas=i;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../src/TradeCanvas.tsx"],"sourcesContent":["import { useRef, useEffect, useImperativeHandle, forwardRef, type CSSProperties } from 'react';\nimport {\n  Chart,\n  BinanceAdapter,\n  DARK_THEME,\n  LIGHT_THEME,\n} from '@tradecanvas/chart';\nimport type {\n  ChartType,\n  TimeFrame,\n  ChartOptions,\n  FeaturesConfig,\n  Theme,\n  OHLCBar,\n  SignalMarker,\n  TradeZone,\n  SignalMarkerStyle,\n  TradeZoneStyle,\n  DataAdapter,\n  StreamConfig,\n} from '@tradecanvas/chart';\n\nexport interface TradeCanvasRef {\n  getChart(): Chart | null;\n  screenshot(filename?: string): void;\n  screenshotDataURL(): string | null;\n}\n\nexport interface TradeCanvasProps {\n  symbol?: string;\n  timeframe?: TimeFrame;\n  theme?: 'dark' | 'light' | Theme;\n  chartType?: ChartType;\n  indicators?: string[];\n  data?: OHLCBar[];\n  adapter?: DataAdapter;\n  historyLimit?: number;\n  features?: FeaturesConfig;\n  autoScale?: boolean;\n  signalMarkers?: SignalMarker[];\n  signalMarkerStyle?: SignalMarkerStyle;\n  tradeZones?: TradeZone[];\n  tradeZoneStyle?: TradeZoneStyle;\n  watermarkText?: string;\n  onReady?: (chart: Chart) => void;\n  onCrosshairMove?: (payload: unknown) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\nfunction resolveTheme(theme: 'dark' | 'light' | Theme | undefined): Theme {\n  if (!theme || theme === 'dark') return DARK_THEME;\n  if (theme === 'light') return LIGHT_THEME;\n  return theme;\n}\n\nexport const TradeCanvas = forwardRef<TradeCanvasRef, TradeCanvasProps>(\n  function TradeCanvas(props, ref) {\n    const {\n      symbol = 'BTCUSDT',\n      timeframe = '5m' as TimeFrame,\n      theme = 'dark',\n      chartType = 'candlestick' as ChartType,\n      indicators = [],\n      data,\n      adapter,\n      historyLimit = 500,\n      features,\n      autoScale = true,\n      signalMarkers,\n      signalMarkerStyle,\n      tradeZones,\n      tradeZoneStyle,\n      watermarkText,\n      onReady,\n      onCrosshairMove,\n      className,\n      style,\n    } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const chartRef = useRef<Chart | null>(null);\n    const indicatorIdsRef = useRef<Map<string, string>>(new Map());\n    const prevStreamRef = useRef({ symbol, timeframe });\n\n    useImperativeHandle(ref, () => ({\n      getChart: () => chartRef.current,\n      screenshot: (filename?: string) => chartRef.current?.screenshot(filename),\n      screenshotDataURL: () => chartRef.current?.screenshotDataURL() ?? null,\n    }));\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const opts: ChartOptions = {\n        chartType,\n        theme: resolveTheme(theme),\n        autoScale,\n        rightMargin: 5,\n        crosshair: { mode: 'magnet' },\n        features: {\n          drawings: true,\n          drawingMagnet: true,\n          drawingUndoRedo: true,\n          indicators: true,\n          trading: true,\n          volume: true,\n          legend: true,\n          crosshair: true,\n          keyboard: true,\n          screenshot: true,\n          alerts: true,\n          barCountdown: true,\n          logScale: true,\n          watermark: true,\n          ...features,\n        },\n      };\n\n      if (watermarkText) {\n        opts.watermark = { text: watermarkText, fontSize: 48, color: 'rgba(255,255,255,0.03)' };\n      }\n\n      const chart = new Chart(container, opts);\n      chartRef.current = chart;\n      indicatorIdsRef.current = new Map();\n\n      if (data) {\n        chart.setData(data);\n      } else {\n        const dataAdapter = adapter ?? new BinanceAdapter();\n        chart.connect({ adapter: dataAdapter, symbol, timeframe, historyLimit });\n      }\n\n      onReady?.(chart);\n\n      return () => {\n        chart.disconnectStream();\n        chart.destroy();\n        chartRef.current = null;\n        indicatorIdsRef.current.clear();\n      };\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useEffect(() => {\n      const chart = chartRef.current;\n      if (!chart || data) return;\n      const prev = prevStreamRef.current;\n      if (prev.symbol === symbol && prev.timeframe === timeframe) return;\n      prevStreamRef.current = { symbol, timeframe };\n\n      chart.disconnectStream();\n      const dataAdapter = adapter ?? new BinanceAdapter();\n      chart.connect({ adapter: dataAdapter, symbol, timeframe, historyLimit });\n      if (watermarkText !== undefined) {\n        chart.setWatermark(watermarkText);\n      }\n    }, [symbol, timeframe, adapter, historyLimit, data, watermarkText]);\n\n    useEffect(() => {\n      chartRef.current?.setTheme(resolveTheme(theme));\n    }, [theme]);\n\n    useEffect(() => {\n      chartRef.current?.setChartType(chartType);\n    }, [chartType]);\n\n    useEffect(() => {\n      if (data) chartRef.current?.setData(data);\n    }, [data]);\n\n    useEffect(() => {\n      const chart = chartRef.current;\n      if (!chart) return;\n      const current = indicatorIdsRef.current;\n      const desired = new Set(indicators);\n      for (const [name, instanceId] of current) {\n        if (!desired.has(name)) {\n          chart.removeIndicator(instanceId);\n          current.delete(name);\n        }\n      }\n      for (const name of indicators) {\n        if (!current.has(name)) {\n          const instanceId = chart.addIndicator(name);\n          if (instanceId) current.set(name, instanceId);\n        }\n      }\n    }, [indicators]);\n\n    useEffect(() => {\n      if (signalMarkers) chartRef.current?.setSignalMarkers(signalMarkers);\n    }, [signalMarkers]);\n\n    useEffect(() => {\n      if (signalMarkerStyle) chartRef.current?.setSignalMarkerStyle(signalMarkerStyle);\n    }, [signalMarkerStyle]);\n\n    useEffect(() => {\n      if (tradeZones) chartRef.current?.setTradeZones(tradeZones);\n    }, [tradeZones]);\n\n    useEffect(() => {\n      if (tradeZoneStyle) chartRef.current?.setTradeZoneStyle(tradeZoneStyle);\n    }, [tradeZoneStyle]);\n\n    useEffect(() => {\n      const chart = chartRef.current;\n      if (!chart || !onCrosshairMove) return;\n      chart.on('crosshairMove', onCrosshairMove as (e: unknown) => void);\n    }, [onCrosshairMove]);\n\n    return (\n      <div\n        ref={containerRef}\n        className={className}\n        style={{ width: '100%', height: '100%', ...style }}\n      />\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+import { Chart } from '@tradecanvas/chart';
+import { ChartType } from '@tradecanvas/chart';
+import { CSSProperties } from 'react';
+import { DataAdapter } from '@tradecanvas/chart';
+import { FeaturesConfig } from '@tradecanvas/chart';
+import { ForwardRefExoticComponent } from 'react';
+import { OHLCBar } from '@tradecanvas/chart';
+import { RefAttributes } from 'react';
+import { SignalMarker } from '@tradecanvas/chart';
+import { SignalMarkerStyle } from '@tradecanvas/chart';
+import { Theme } from '@tradecanvas/chart';
+import { TimeFrame } from '@tradecanvas/chart';
+import { TradeZone } from '@tradecanvas/chart';
+import { TradeZoneStyle } from '@tradecanvas/chart';
+
+export declare const TradeCanvas: ForwardRefExoticComponent<TradeCanvasProps & RefAttributes<TradeCanvasRef>>;
+
+export declare interface TradeCanvasProps {
+    symbol?: string;
+    timeframe?: TimeFrame;
+    theme?: 'dark' | 'light' | Theme;
+    chartType?: ChartType;
+    indicators?: string[];
+    data?: OHLCBar[];
+    adapter?: DataAdapter;
+    historyLimit?: number;
+    features?: FeaturesConfig;
+    autoScale?: boolean;
+    signalMarkers?: SignalMarker[];
+    signalMarkerStyle?: SignalMarkerStyle;
+    tradeZones?: TradeZone[];
+    tradeZoneStyle?: TradeZoneStyle;
+    watermarkText?: string;
+    onReady?: (chart: Chart) => void;
+    onCrosshairMove?: (payload: unknown) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+
+export declare interface TradeCanvasRef {
+    getChart(): Chart | null;
+    screenshot(filename?: string): void;
+    screenshotDataURL(): string | null;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,125 @@
+import { forwardRef as e, useEffect as t, useImperativeHandle as n, useRef as r } from "react";
+import { BinanceAdapter as i, Chart as a, DARK_THEME as o, LIGHT_THEME as s } from "@tradecanvas/chart";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/TradeCanvas.tsx
+function l(e) {
+	return !e || e === "dark" ? o : e === "light" ? s : e;
+}
+var u = e(function(e, o) {
+	let { symbol: s = "BTCUSDT", timeframe: u = "5m", theme: d = "dark", chartType: f = "candlestick", indicators: p = [], data: m, adapter: h, historyLimit: g = 500, features: _, autoScale: v = !0, signalMarkers: y, signalMarkerStyle: b, tradeZones: x, tradeZoneStyle: S, watermarkText: C, onReady: w, onCrosshairMove: T, className: E, style: D } = e, O = r(null), k = r(null), A = r(/* @__PURE__ */ new Map()), j = r({
+		symbol: s,
+		timeframe: u
+	});
+	return n(o, () => ({
+		getChart: () => k.current,
+		screenshot: (e) => k.current?.screenshot(e),
+		screenshotDataURL: () => k.current?.screenshotDataURL() ?? null
+	})), t(() => {
+		let e = O.current;
+		if (!e) return;
+		let t = {
+			chartType: f,
+			theme: l(d),
+			autoScale: v,
+			rightMargin: 5,
+			crosshair: { mode: "magnet" },
+			features: {
+				drawings: !0,
+				drawingMagnet: !0,
+				drawingUndoRedo: !0,
+				indicators: !0,
+				trading: !0,
+				volume: !0,
+				legend: !0,
+				crosshair: !0,
+				keyboard: !0,
+				screenshot: !0,
+				alerts: !0,
+				barCountdown: !0,
+				logScale: !0,
+				watermark: !0,
+				..._
+			}
+		};
+		C && (t.watermark = {
+			text: C,
+			fontSize: 48,
+			color: "rgba(255,255,255,0.03)"
+		});
+		let n = new a(e, t);
+		if (k.current = n, A.current = /* @__PURE__ */ new Map(), m) n.setData(m);
+		else {
+			let e = h ?? new i();
+			n.connect({
+				adapter: e,
+				symbol: s,
+				timeframe: u,
+				historyLimit: g
+			});
+		}
+		return w?.(n), () => {
+			n.disconnectStream(), n.destroy(), k.current = null, A.current.clear();
+		};
+	}, []), t(() => {
+		let e = k.current;
+		if (!e || m) return;
+		let t = j.current;
+		if (t.symbol === s && t.timeframe === u) return;
+		j.current = {
+			symbol: s,
+			timeframe: u
+		}, e.disconnectStream();
+		let n = h ?? new i();
+		e.connect({
+			adapter: n,
+			symbol: s,
+			timeframe: u,
+			historyLimit: g
+		}), C !== void 0 && e.setWatermark(C);
+	}, [
+		s,
+		u,
+		h,
+		g,
+		m,
+		C
+	]), t(() => {
+		k.current?.setTheme(l(d));
+	}, [d]), t(() => {
+		k.current?.setChartType(f);
+	}, [f]), t(() => {
+		m && k.current?.setData(m);
+	}, [m]), t(() => {
+		let e = k.current;
+		if (!e) return;
+		let t = A.current, n = new Set(p);
+		for (let [r, i] of t) n.has(r) || (e.removeIndicator(i), t.delete(r));
+		for (let n of p) if (!t.has(n)) {
+			let r = e.addIndicator(n);
+			r && t.set(n, r);
+		}
+	}, [p]), t(() => {
+		y && k.current?.setSignalMarkers(y);
+	}, [y]), t(() => {
+		b && k.current?.setSignalMarkerStyle(b);
+	}, [b]), t(() => {
+		x && k.current?.setTradeZones(x);
+	}, [x]), t(() => {
+		S && k.current?.setTradeZoneStyle(S);
+	}, [S]), t(() => {
+		let e = k.current;
+		!e || !T || e.on("crosshairMove", T);
+	}, [T]), /* @__PURE__ */ c("div", {
+		ref: O,
+		className: E,
+		style: {
+			width: "100%",
+			height: "100%",
+			...D
+		}
+	});
+});
+//#endregion
+export { u as TradeCanvas };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/TradeCanvas.tsx"],"sourcesContent":["import { useRef, useEffect, useImperativeHandle, forwardRef, type CSSProperties } from 'react';\nimport {\n  Chart,\n  BinanceAdapter,\n  DARK_THEME,\n  LIGHT_THEME,\n} from '@tradecanvas/chart';\nimport type {\n  ChartType,\n  TimeFrame,\n  ChartOptions,\n  FeaturesConfig,\n  Theme,\n  OHLCBar,\n  SignalMarker,\n  TradeZone,\n  SignalMarkerStyle,\n  TradeZoneStyle,\n  DataAdapter,\n  StreamConfig,\n} from '@tradecanvas/chart';\n\nexport interface TradeCanvasRef {\n  getChart(): Chart | null;\n  screenshot(filename?: string): void;\n  screenshotDataURL(): string | null;\n}\n\nexport interface TradeCanvasProps {\n  symbol?: string;\n  timeframe?: TimeFrame;\n  theme?: 'dark' | 'light' | Theme;\n  chartType?: ChartType;\n  indicators?: string[];\n  data?: OHLCBar[];\n  adapter?: DataAdapter;\n  historyLimit?: number;\n  features?: FeaturesConfig;\n  autoScale?: boolean;\n  signalMarkers?: SignalMarker[];\n  signalMarkerStyle?: SignalMarkerStyle;\n  tradeZones?: TradeZone[];\n  tradeZoneStyle?: TradeZoneStyle;\n  watermarkText?: string;\n  onReady?: (chart: Chart) => void;\n  onCrosshairMove?: (payload: unknown) => void;\n  className?: string;\n  style?: CSSProperties;\n}\n\nfunction resolveTheme(theme: 'dark' | 'light' | Theme | undefined): Theme {\n  if (!theme || theme === 'dark') return DARK_THEME;\n  if (theme === 'light') return LIGHT_THEME;\n  return theme;\n}\n\nexport const TradeCanvas = forwardRef<TradeCanvasRef, TradeCanvasProps>(\n  function TradeCanvas(props, ref) {\n    const {\n      symbol = 'BTCUSDT',\n      timeframe = '5m' as TimeFrame,\n      theme = 'dark',\n      chartType = 'candlestick' as ChartType,\n      indicators = [],\n      data,\n      adapter,\n      historyLimit = 500,\n      features,\n      autoScale = true,\n      signalMarkers,\n      signalMarkerStyle,\n      tradeZones,\n      tradeZoneStyle,\n      watermarkText,\n      onReady,\n      onCrosshairMove,\n      className,\n      style,\n    } = props;\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const chartRef = useRef<Chart | null>(null);\n    const indicatorIdsRef = useRef<Map<string, string>>(new Map());\n    const prevStreamRef = useRef({ symbol, timeframe });\n\n    useImperativeHandle(ref, () => ({\n      getChart: () => chartRef.current,\n      screenshot: (filename?: string) => chartRef.current?.screenshot(filename),\n      screenshotDataURL: () => chartRef.current?.screenshotDataURL() ?? null,\n    }));\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (!container) return;\n\n      const opts: ChartOptions = {\n        chartType,\n        theme: resolveTheme(theme),\n        autoScale,\n        rightMargin: 5,\n        crosshair: { mode: 'magnet' },\n        features: {\n          drawings: true,\n          drawingMagnet: true,\n          drawingUndoRedo: true,\n          indicators: true,\n          trading: true,\n          volume: true,\n          legend: true,\n          crosshair: true,\n          keyboard: true,\n          screenshot: true,\n          alerts: true,\n          barCountdown: true,\n          logScale: true,\n          watermark: true,\n          ...features,\n        },\n      };\n\n      if (watermarkText) {\n        opts.watermark = { text: watermarkText, fontSize: 48, color: 'rgba(255,255,255,0.03)' };\n      }\n\n      const chart = new Chart(container, opts);\n      chartRef.current = chart;\n      indicatorIdsRef.current = new Map();\n\n      if (data) {\n        chart.setData(data);\n      } else {\n        const dataAdapter = adapter ?? new BinanceAdapter();\n        chart.connect({ adapter: dataAdapter, symbol, timeframe, historyLimit });\n      }\n\n      onReady?.(chart);\n\n      return () => {\n        chart.disconnectStream();\n        chart.destroy();\n        chartRef.current = null;\n        indicatorIdsRef.current.clear();\n      };\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useEffect(() => {\n      const chart = chartRef.current;\n      if (!chart || data) return;\n      const prev = prevStreamRef.current;\n      if (prev.symbol === symbol && prev.timeframe === timeframe) return;\n      prevStreamRef.current = { symbol, timeframe };\n\n      chart.disconnectStream();\n      const dataAdapter = adapter ?? new BinanceAdapter();\n      chart.connect({ adapter: dataAdapter, symbol, timeframe, historyLimit });\n      if (watermarkText !== undefined) {\n        chart.setWatermark(watermarkText);\n      }\n    }, [symbol, timeframe, adapter, historyLimit, data, watermarkText]);\n\n    useEffect(() => {\n      chartRef.current?.setTheme(resolveTheme(theme));\n    }, [theme]);\n\n    useEffect(() => {\n      chartRef.current?.setChartType(chartType);\n    }, [chartType]);\n\n    useEffect(() => {\n      if (data) chartRef.current?.setData(data);\n    }, [data]);\n\n    useEffect(() => {\n      const chart = chartRef.current;\n      if (!chart) return;\n      const current = indicatorIdsRef.current;\n      const desired = new Set(indicators);\n      for (const [name, instanceId] of current) {\n        if (!desired.has(name)) {\n          chart.removeIndicator(instanceId);\n          current.delete(name);\n        }\n      }\n      for (const name of indicators) {\n        if (!current.has(name)) {\n          const instanceId = chart.addIndicator(name);\n          if (instanceId) current.set(name, instanceId);\n        }\n      }\n    }, [indicators]);\n\n    useEffect(() => {\n      if (signalMarkers) chartRef.current?.setSignalMarkers(signalMarkers);\n    }, [signalMarkers]);\n\n    useEffect(() => {\n      if (signalMarkerStyle) chartRef.current?.setSignalMarkerStyle(signalMarkerStyle);\n    }, [signalMarkerStyle]);\n\n    useEffect(() => {\n      if (tradeZones) chartRef.current?.setTradeZones(tradeZones);\n    }, [tradeZones]);\n\n    useEffect(() => {\n      if (tradeZoneStyle) chartRef.current?.setTradeZoneStyle(tradeZoneStyle);\n    }, [tradeZoneStyle]);\n\n    useEffect(() => {\n      const chart = chartRef.current;\n      if (!chart || !onCrosshairMove) return;\n      chart.on('crosshairMove', onCrosshairMove as (e: unknown) => void);\n    }, [onCrosshairMove]);\n\n    return (\n      <div\n        ref={containerRef}\n        className={className}\n        style={{ width: '100%', height: '100%', ...style }}\n      />\n    );\n  },\n);\n"],"mappings":";;;;AAkDA,SAAS,EAAa,GAAoD;AAGxE,QAFI,CAAC,KAAS,MAAU,SAAe,IACnC,MAAU,UAAgB,IACvB;;AAGT,IAAa,IAAc,EACzB,SAAqB,GAAO,GAAK;CAC/B,IAAM,EACJ,YAAS,WACT,eAAY,MACZ,WAAQ,QACR,eAAY,eACZ,gBAAa,EAAE,EACf,SACA,YACA,kBAAe,KACf,aACA,eAAY,IACZ,kBACA,sBACA,eACA,mBACA,kBACA,YACA,oBACA,cACA,aACE,GAEE,IAAe,EAAuB,KAAK,EAC3C,IAAW,EAAqB,KAAK,EACrC,IAAkB,kBAA4B,IAAI,KAAK,CAAC,EACxD,IAAgB,EAAO;EAAE;EAAQ;EAAW,CAAC;AAmInD,QAjIA,EAAoB,UAAY;EAC9B,gBAAgB,EAAS;EACzB,aAAa,MAAsB,EAAS,SAAS,WAAW,EAAS;EACzE,yBAAyB,EAAS,SAAS,mBAAmB,IAAI;EACnE,EAAE,EAEH,QAAgB;EACd,IAAM,IAAY,EAAa;AAC/B,MAAI,CAAC,EAAW;EAEhB,IAAM,IAAqB;GACzB;GACA,OAAO,EAAa,EAAM;GAC1B;GACA,aAAa;GACb,WAAW,EAAE,MAAM,UAAU;GAC7B,UAAU;IACR,UAAU;IACV,eAAe;IACf,iBAAiB;IACjB,YAAY;IACZ,SAAS;IACT,QAAQ;IACR,QAAQ;IACR,WAAW;IACX,UAAU;IACV,YAAY;IACZ,QAAQ;IACR,cAAc;IACd,UAAU;IACV,WAAW;IACX,GAAG;IACJ;GACF;AAED,EAAI,MACF,EAAK,YAAY;GAAE,MAAM;GAAe,UAAU;GAAI,OAAO;GAA0B;EAGzF,IAAM,IAAQ,IAAI,EAAM,GAAW,EAAK;AAIxC,MAHA,EAAS,UAAU,GACnB,EAAgB,0BAAU,IAAI,KAAK,EAE/B,EACF,GAAM,QAAQ,EAAK;OACd;GACL,IAAM,IAAc,KAAW,IAAI,GAAgB;AACnD,KAAM,QAAQ;IAAE,SAAS;IAAa;IAAQ;IAAW;IAAc,CAAC;;AAK1E,SAFA,IAAU,EAAM,QAEH;AAIX,GAHA,EAAM,kBAAkB,EACxB,EAAM,SAAS,EACf,EAAS,UAAU,MACnB,EAAgB,QAAQ,OAAO;;IAGhC,EAAE,CAAC,EAEN,QAAgB;EACd,IAAM,IAAQ,EAAS;AACvB,MAAI,CAAC,KAAS,EAAM;EACpB,IAAM,IAAO,EAAc;AAC3B,MAAI,EAAK,WAAW,KAAU,EAAK,cAAc,EAAW;AAG5D,EAFA,EAAc,UAAU;GAAE;GAAQ;GAAW,EAE7C,EAAM,kBAAkB;EACxB,IAAM,IAAc,KAAW,IAAI,GAAgB;AAEnD,EADA,EAAM,QAAQ;GAAE,SAAS;GAAa;GAAQ;GAAW;GAAc,CAAC,EACpE,MAAkB,KAAA,KACpB,EAAM,aAAa,EAAc;IAElC;EAAC;EAAQ;EAAW;EAAS;EAAc;EAAM;EAAc,CAAC,EAEnE,QAAgB;AACd,IAAS,SAAS,SAAS,EAAa,EAAM,CAAC;IAC9C,CAAC,EAAM,CAAC,EAEX,QAAgB;AACd,IAAS,SAAS,aAAa,EAAU;IACxC,CAAC,EAAU,CAAC,EAEf,QAAgB;AACd,EAAI,KAAM,EAAS,SAAS,QAAQ,EAAK;IACxC,CAAC,EAAK,CAAC,EAEV,QAAgB;EACd,IAAM,IAAQ,EAAS;AACvB,MAAI,CAAC,EAAO;EACZ,IAAM,IAAU,EAAgB,SAC1B,IAAU,IAAI,IAAI,EAAW;AACnC,OAAK,IAAM,CAAC,GAAM,MAAe,EAC/B,CAAK,EAAQ,IAAI,EAAK,KACpB,EAAM,gBAAgB,EAAW,EACjC,EAAQ,OAAO,EAAK;AAGxB,OAAK,IAAM,KAAQ,EACjB,KAAI,CAAC,EAAQ,IAAI,EAAK,EAAE;GACtB,IAAM,IAAa,EAAM,aAAa,EAAK;AAC3C,GAAI,KAAY,EAAQ,IAAI,GAAM,EAAW;;IAGhD,CAAC,EAAW,CAAC,EAEhB,QAAgB;AACd,EAAI,KAAe,EAAS,SAAS,iBAAiB,EAAc;IACnE,CAAC,EAAc,CAAC,EAEnB,QAAgB;AACd,EAAI,KAAmB,EAAS,SAAS,qBAAqB,EAAkB;IAC/E,CAAC,EAAkB,CAAC,EAEvB,QAAgB;AACd,EAAI,KAAY,EAAS,SAAS,cAAc,EAAW;IAC1D,CAAC,EAAW,CAAC,EAEhB,QAAgB;AACd,EAAI,KAAgB,EAAS,SAAS,kBAAkB,EAAe;IACtE,CAAC,EAAe,CAAC,EAEpB,QAAgB;EACd,IAAM,IAAQ,EAAS;AACnB,GAAC,KAAS,CAAC,KACf,EAAM,GAAG,iBAAiB,EAAwC;IACjE,CAAC,EAAgB,CAAC,EAGnB,kBAAC,OAAD;EACE,KAAK;EACM;EACX,OAAO;GAAE,OAAO;GAAQ,QAAQ;GAAQ,GAAG;GAAO;EAClD,CAAA;EAGP"}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@tradecanvas/react",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "React component for @tradecanvas/chart — reactive props, ref forwarding, zero boilerplate.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bonguynvan/tradecanvas.git",
+    "directory": "packages/react"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "trading",
+    "chart",
+    "react",
+    "candlestick",
+    "canvas",
+    "technical-analysis"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@tradecanvas/chart": "1.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.5.2",
+    "jsdom": "^25.0.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "vitest": "^2.1.8"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "clean": "rm -rf dist",
+    "test": "vitest run"
+  }
+}