프레임워크 래퍼

React, Vue, Svelte에 맞게 만든 래퍼입니다. 세 래퍼 모두 같은 props를 제공하며, 내부의 Chart 인스턴스를 넘겨줍니다.

설치

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

Prop	타입	비고
symbol	string	필수.
timeframe	TimeFrame	'1m' | '5m' | '15m' | '1h' | '4h' | '1d'
theme	ThemeName	'dark' | 'light' | 'darkTerminal'
adapter	DataAdapter	실시간 스트림 소스.
historyLimit	number	처음에 불러올 봉 수.
trading	boolean	트레이딩 오버레이를 활성화합니다.
onReady	(chart) => void	차트가 마운트된 후 호출됩니다.

props만으로 부족한가요? onReady, ref(React / Vue), 또는 bind:chart(Svelte)로 내부 Chart에 접근하면 그림, 트레이딩, 실행 어댑터, 플러그인, 크기 조절 가능한 패널 등 전체 API를 사용할 수 있습니다.