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/