Skip to main content

Introduction

React component that wraps an existing TradingView Charting Library widget and adds iC Candle’s scanner UI: a draggable popup to run pattern search over a user-selected bar range, with theming loaded from iC Candle’s API.

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

Install​

npm install @iccandle/selector

How to get an API key​

  1. Register or sign in at the iC Candle corporate portal.
  2. Use Create API key in the dashboard.
  3. When selecting a service, choose search so the key is valid for this widget (remote theming, candle cache, and scanner validation).

Issued keys use the format icc_search_ followed by 48 hexadecimal characters.

Prerequisites​

RequirementDetails
React 18+react and react-dom are peer dependencies - install them in your app.
TradingView Charting LibraryObtain under your own license from TradingView, host static assets (e.g. /charting_library/ in public), and load at runtime. This package does not ship the charting library.
iC Candle API keyRequired for theme, candle cache, and scanner validation. Format: icc_search_ + 48 hex chars.

Quick start​

import { useState } from "react";
import type { IChartingLibraryWidget } from "charting_library/charting_library";
import { SelectorWidget } from "@iccandle/selector";

function App() {
  const [chartWidget, setChartWidget] = useState<IChartingLibraryWidget | null>(
    null,
  );
  const widgetKey = "icc_search_..."; // iC Candle-issued key (48 hex chars after prefix)

  return (
    <SelectorWidget
      chartWidget={chartWidget}
      widgetKey={widgetKey}
      theme="system"
      submitCallback={(iframeSrc) => {
        // Full URL for the iC Candle plugin iframe (open in modal, new window, etc.)
        console.log(iframeSrc);
      }}
    >
      {/* Your chart container + TradingView bootstrap; call setChartWidget when ready */}
      <div id="tv_chart_container" style={{ height: "100%" }} />
    </SelectorWidget>
  );
}

Replace the chart placeholder with your TradingView initialization and pass the IChartingLibraryWidget instance when onChartReady (or equivalent) fires.

Next steps​