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:

• ADVANCED_CHART
• COMPANY_PROFILE
• ECONOMIC_CALENDAR
• FOREX_CROSS_RATES
• FOREX_HEATMAP
• FUNDAMENTAL_DATA
• MARKET_DATA
• MARKET_OVERVIEW
• MINI_CHART
• SCREENER
• SCREENER_CRYPTOCURRENCY
• SYMBOL_INFO
• SYMBOL_OVERVIEW
• STOCK_MARKET
• TECHNICAL_ANALYSIS
• TICKER
• TICKER_SINGLE
• 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