Introduction

React overlay for the TradingView Charting Library that adds iC Candle’s pattern scanner, results iframe, pattern tracker, and news/event integration in one package.

Published as ESM and CommonJS; component styles are bundled and injected at runtime (no separate CSS import).

Surface	Role
Scanner popup	Draggable overlay over the chart. Select a bar window with TradingView’s Date Range tool, then run a scan or subscribe to pattern alerts.
Results iframe	Side-by-side panel hosting the iC Candle embed app (embed-iccandle-app.iccandle.ai) — search results, similar events, auth, billing.
Chart sync	Bidirectional postMessage bridge: pattern selection, chart replay, news marks, sign-in tokens, loading state.

Install

npm install @iccandle/reactjs-widget
# or
pnpm add @iccandle/reactjs-widget

Prerequisites

Requirement	Details
React 18+	react and react-dom are peer dependencies — install them in your app.
TradingView Charting Library	Obtain under your own license from TradingView, host static assets (e.g. /charting_library/ in public), and bootstrap the widget yourself. This package does not ship the charting library.

Quick start

import { useEffect, useRef, useState } from "react";
import type {
  ChartingLibraryWidgetOptions,
  IChartingLibraryWidget,
  ResolutionString,
} from "charting_library/charting_library";
import { widget } from "charting_library/charting_library";
import {
  WidgetIccandle,
  withPlayChart,
  getCustomIndicators,
} from "@iccandle/reactjs-widget";

const LIBRARY_PATH = "/charting_library/";

function App() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [chartWidget, setChartWidget] = useState<IChartingLibraryWidget | null>(
    null,
  );

  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <WidgetIccandle chartWidget={chartWidget} theme="light" language="en">
        {(chartRefs) => (
          <ChartHost
            containerRef={containerRef}
            chartRefs={chartRefs}
            onReady={setChartWidget}
          />
        )}
      </WidgetIccandle>
    </div>
  );
}

function ChartHost({
  containerRef,
  chartRefs,
  onReady,
}: {
  containerRef: React.RefObject<HTMLDivElement | null>;
  chartRefs: import("@iccandle/reactjs-widget").WidgetIccandleChartRefs;
  onReady: (w: IChartingLibraryWidget | null) => void;
}) {
  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;

    const options: ChartingLibraryWidgetOptions = {
      container: el,
      library_path: LIBRARY_PATH,
      symbol: "EURUSD",
      interval: "60" as ResolutionString,
      datafeed: withPlayChart(yourDatafeed), // enables chart replay injection
      locale: "en",
      autosize: true,
      drawings_access: {
        type: "black",
        tools: [{ name: "Date Range" }],
      },
      custom_indicators_getter: () => getCustomIndicators("light"),
    };

    const tv = new widget(options);
    onReady(tv);

    return () => {
      try {
        tv.remove();
      } catch {
        /* no-op */
      }
      onReady(null);
    };
  }, [containerRef, chartRefs, onReady]);

  return <div ref={containerRef} style={{ height: "100%", width: "100%" }} />;
}

Use a render-prop children when you need chartRefs for generated-candle studies (replay / predict). A plain React node also works if you do not need those refs.

Typical flow

1. User draws a Date Range on the chart (or activates the scanner).
2. Scanner caches the selected candles and opens the results iframe with search parameters.
3. The embed app returns matches; selecting a pattern redraws the range on the chart. Replay / news flows inject predicted candles via custom indicators.

Next steps

• Get started — install, host charting library, bootstrap TradingView, wrap with WidgetIccandle
• Configuration — props, exports, auth, postMessage bridge, theming
• Troubleshooting — common issues