Use TradeScript with React

TradeScriptWidget gives a React page one chart container while the SDK owns the chart inside it. React mounts and unmounts the container; the component creates and destroys the TradeScript chart at the same points in the component lifecycle.

Before you start

Complete Package access, ensure the host application provides React and ReactDOM, and import the styles once from the application root:

npm install react react-dom

import '@tradescript/pro/style.css';
import '@tradescript/pro/tailwind.css';
import '@tradescript/pro/react/style.css';

Create one authorized SDK during application bootstrap, before rendering the first chart. See Customer authorization.

Mount a chart

import { TradeScriptWidget } from '@tradescript/pro/react';
import type { MarketDataFeed, TradeScriptSdk } from '@tradescript/pro/sdk/core';

export function PriceChart({
  sdk,
  datafeed,
}: {
  sdk: Pick<TradeScriptSdk, 'chart'>;
  datafeed: MarketDataFeed;
}) {
  return (
    <TradeScriptWidget
      sdk={sdk}
      symbol={{ ticker: 'AAPL', exchange: 'NASDAQ', type: 'stock' }}
      interval="1D"
      datafeed={datafeed}
      theme="dark"
      style={{ height: 640 }}
    />
  );
}

The component needs a real height. It forwards className and style to the React-owned container.

Wait for the chart to be ready

onMount receives the mounted lifecycle handle. Wait for ready() before using chart controllers or reading chart data:

import { useCallback } from 'react';
import { TradeScriptWidget } from '@tradescript/pro/react';
import type { ChartSdkMount } from '@tradescript/pro/sdk/core';

const handleMount = useCallback((mounted: ChartSdkMount) => {
  void mounted.ready().then(async (widget) => {
    const chart = widget.chart();
    await chart.dataReady();
    await chart.setInterval('1H');
  });
}, []);

<TradeScriptWidget
  sdk={sdk}
  symbol="AAPL"
  interval="1D"
  datafeed={datafeed}
  onMount={handleMount}
  style={{ height: 640 }}
/>;

Keep onMount stable with useCallback when it closes over application state.

Update the mounted chart

Changing these props updates the existing chart:

• symbol
• interval
• chartType
• theme
• locale
• timezone
• objectProviders

Options that define the chart's services or construction policy, such as the datafeed, broker, storage adapter, feature policy, or multi-chart structure, are initial configuration. Remount the component with a new React key when one of those boundaries changes.

Cleanup

Unmounting TradeScriptWidget destroys the mounted chart and releases its DOM, workers, and subscriptions. Do not call destroy() from a React cleanup for the same component; the adapter already owns that teardown.

Next.js and server rendering

Render the chart from a Client Component. Create or load the authorized SDK in the browser, and keep global TradeScript stylesheet imports in the root layout. The Next.js starter shows the complete pattern.

Troubleshooting

Problem	Check
Blank chart area	The component or its parent has no height.
Controller call fails during startup	Wait for mounted.ready() and, for data-dependent calls, chart.dataReady().
Datafeed or broker prop change has no effect	Remount the component; those are construction-time boundaries.
The chart mounts twice in development	React Strict Mode is exercising mount cleanup; keep the SDK stable and do not create it inside component render.

Next steps

• Chart Controller — runtime operations once the chart is ready.
• Widget Options — every construction setting the component forwards.
• Framework and Widget Starters — the same mount in other frameworks.