Envoltorios para frameworks

Envoltorios idiomáticos para React, Vue y Svelte. Los tres exponen las mismas props y te dan acceso a la instancia de Chart subyacente.

Instalación

npm install @tradecanvas/react   # or @tradecanvas/vue · @tradecanvas/svelte
npm install @tradecanvas/chart   # the core (peer of each wrapper)

React

import { TradeCanvas, type TradeCanvasRef } from '@tradecanvas/react'
import { BinanceAdapter } from '@tradecanvas/chart'
import { useRef } from 'react'

function App() {
  const chartRef = useRef<TradeCanvasRef>(null)

  return (
    <TradeCanvas
      ref={chartRef}
      symbol="BTCUSDT"
      timeframe="5m"
      theme="dark"
      adapter={new BinanceAdapter()}
      onReady={(chart) => {
        chart.on('orderPlace', e => console.log(e.payload))
      }}
    />
  )
}

Vue

<script setup lang="ts">
import { TradeCanvas } from '@tradecanvas/vue'
import { BinanceAdapter } from '@tradecanvas/chart'

const adapter = new BinanceAdapter()
</script>

<template>
  <TradeCanvas
    symbol="BTCUSDT"
    timeframe="5m"
    theme="dark"
    :adapter="adapter"
    @ready="(chart) => console.log('ready', chart)"
  />
</template>

Svelte

<script lang="ts">
  import { TradeCanvas } from '@tradecanvas/svelte'
  import { BinanceAdapter } from '@tradecanvas/chart'

  const adapter = new BinanceAdapter()
</script>

<TradeCanvas
  symbol="BTCUSDT"
  timeframe="5m"
  theme="dark"
  {adapter}
  onReady={(chart) => console.log('ready', chart)}
/>

Props comunes

Prop	Tipo	Notas
symbol	string	Obligatoria.
timeframe	TimeFrame	'1m' | '5m' | '15m' | '1h' | '4h' | '1d'
theme	ThemeName	'dark' | 'light' | 'darkTerminal'
adapter	DataAdapter	Fuente del flujo en vivo.
historyLimit	number	Barras iniciales que se cargan.
trading	boolean	Activa la capa de trading.
onReady	(chart) => void	Se dispara cuando el gráfico se ha montado.

¿Necesitas algo más allá de las props? Accede al Chart subyacente mediante onReady, una ref (React / Vue) o bind:chart (Svelte) para usar la API completa: dibujos, trading, adaptadores de ejecución, plugins, paneles redimensionables y más.