react-ts-tradingview-components

A React component library for TradingView Widgets focused on Indian markets (NSE & BSE). TypeScript is fully supported for every component.

Getting Started

Install the package:

npm i react-ts-tradingview-components

Components

These are all the supported widgets (all pre-configured with Indian market defaults):

• Advanced Real-Time Chart Widget
• Technical Analysis Widget
• Market Overview Widget
• Market Data Widget
• Stock Market Widget
• Economic Calendar Widget
• Ticker Widget
• Ticker Tape Widget
• Single Ticker Widget
• Mini Chart Widget
• Symbol Overview Widget
• Symbol Info Widget
• Screener Widget (defaults to Indian market)
• Stock Heatmap Widget (defaults to NSE)
• Fundamental Data Widget
• Company Profile Widget
• Timeline Widget

Indian Market Defaults

All symbol-based components default to NSE/BSE instruments:

| Component | Default Symbol/Market | | --------------------- | ------------------------------------------------- | | AdvancedRealTimeChart | NSE:NIFTY | | TechnicalAnalysis | NSE:NIFTY | | SymbolInfo | NSE:NIFTY | | SingleTicker | NSE:NIFTY | | MiniChart | NSE:NIFTY | | CompanyProfile | NSE:RELIANCE | | FundamentalData | NSE:RELIANCE | | SymbolOverview | Reliance, TCS, HDFC Bank | | Ticker | Nifty 50, Sensex, Bank Nifty, Reliance, HDFC Bank | | TickerTape | Nifty 50, Sensex, Bank Nifty, Reliance, TCS | | Screener | india market | | StockMarket | NSE exchange | | StockHeatmap | NSE data source |

Usage

import { AdvancedRealTimeChart, Screener, TickerTape } from "react-ts-tradingview-components";

// Renders NIFTY chart by default
<AdvancedRealTimeChart />

// NSE Screener by default
<Screener />

// Indian market ticker tape by default
<TickerTape />

// Customize for BSE
<AdvancedRealTimeChart symbol="BSE:SENSEX" />

TypeScript

The package exports an IndianExchange type for convenience:

import type { IndianExchange } from "react-ts-tradingview-components";
// type IndianExchange = "NSE" | "BSE"

Deployment

Deploy docs and Storybook on Vercel with this setup:

• Framework Preset: Other / Static
• Build Command: npm run build:site
• Output Directory: docs/build

Public URLs:

• Docs: https://react-ts-tradingview-components.cvasingh.com/
• Storybook: https://react-ts-tradingview-components.cvasingh.com/storybook/

Notes:

• For monorepo/workspace setups, set the Vercel project Root Directory to this package root.
• Custom domain is supported, including react-ts-tradingview-components.cvasingh.com.

For extra information please refer to the official TradingView website: https://www.tradingview.com/widget/