React-Typescript-Tradingview-Embed

React Typescript component for TradingView Embeds

Installation

npm install --save react-typescript-tradingview-embed or yarn add react-typescript-tradingview-embed

Example

App.js / App.ts

import React from 'react';

import { TradingViewEmbed, widgetType } from "react-typescript-tradingview-embed";


export default function App() {
  return (
    <div
      className="App"
      style={{background: "rgba(0, 0, 0, 0.85)"}}
    >
      <TradingViewEmbed
        widgetType={widgetType.ADVANCED_CHART}
        widgetConfig={{
          colorTheme: "dark",
          symbol: "BITMEX:XBTUSD",
          width: "100%"
        }}
      />
      <TradingViewEmbed
        widgetType={widgetType.SCREENER_CRYPTOCURRENCY}
        widgetConfig={{
          colorTheme: "dark",
          width: "100%",
          height: "230",
        }}
      />
      <TradingViewEmbed
        widgetType={widgetType.TICKER_TAPE}
        widgetConfig={{
          colorTheme: "light",
          autosize: true
        }}
      />
    </div>
  );
}

Use widgetConfig to declare widget parameters. See each individual widgets for available parameters. The above code running:

Supported widgets:

• [x] ADVANCED_CHART
• [x] COMPANY_PROFILE
• [x] ECONOMIC_CALENDAR
• [x] FOREX_CROSS_RATES
• [x] FOREX_HEATMAP
• [x] FUNDAMENTAL_DATA
• [x] MARKET_DATA
• [x] MARKET_OVERVIEW
• [x] MINI_CHART
• [x] SCREENER
• [x] SCREENER_CRYPTOCURRENCY
• [x] SYMBOL_INFO
• [x] SYMBOL_OVERVIEW
• [x] STOCK_MARKET
• [x] TECHNICAL_ANALYSIS
• [x] TICKER
• [x] TICKER_SINGLE
• [x] TICKER_TAPE

Contributions welcome!

Open a new PR here on GitHub.

Run locally

• Run git clone https://github.com/nordible/React-Typescript-Tradingview-Embed.git this project
• Run cd React-Typescript-Tradingview-Embed/ to this project
• Run npm run dev to start the project on local machine

Bugs and Issues

Have a bug or an issue? Open a new issue here on GitHub.

License

Code licensed under MIT. Everything else is CC

Credits

Thanks to @xnr-k

Follow us

• twitter.com/nordiblehq
• fb.com/nordible

© nordible