useWatchlist

Manage a list of tracked symbols with live price updates from your datafeed.

Multi-instance safe

The list lives in a provider-owned store with one datafeed subscription per ticker, so any number of useWatchlist() instances share the same rows and quotes. Subscriptions follow state.period — switching the timeframe re-subscribes every ticker (rows are kept).

import { useWatchlist } from "react-klinecharts-ui";

const { items, addSymbol, removeSymbol, switchSymbol, activeSymbol } =
  useWatchlist();

Property	Type	Description
items	WatchlistItem[]	Tracked symbols with price data
addSymbol	(ticker: string) => void	Add a symbol
removeSymbol	(ticker: string) => void	Remove a symbol
switchSymbol	(ticker: string) => void	Display a symbol on the chart
activeSymbol	string | null	Currently displayed ticker

interface WatchlistItem {
  ticker: string;
  lastPrice: number | null;
  change: number | null;
  changePercent: number | null;
}

Price data comes from your Datafeed — the hook subscribes per tracked symbol and surfaces the latest values for rendering a watchlist panel.