Note: 10,499,785 live websites use react

start

npx create-react-app my-test-watchlist

Installation

npm i @quantgate-systems/watchlist or if you are using yarn, yarn add @quantgate-systems/watchlist

Usage

In order to use watchlist, create a user on Pilot application and pass your credentials to Watchlist component

create-react-app

import {WatchlistApp} from '@quantgate-systems/watchlist';

const [symbols, setSymbols] = useState([]); //changed symbols sent as prop

//your app's symbol handler
const handler = () => {
  setSymbols(prev => {
    return [...prev, newSymbolToAdd];
  });
};

const onItemClick = instrument => {
  console.log(instrument);
};

return (
  <WatchlistApp
    credentials={{UserName: 'your user name', Password: 'your password'}}
    brokerName={'simulation-mode' || 'demo' || 'signals-only'}
    onItemClick={onItemClick}
    symbols={symbols} //string array of symbols as a callback. Ex above
    onSymbolAdded={symbol => console.log(symbol)}
    miniFilter
    styles={{containerHeight: '100%'}}
  />
);

next.js

import dynamic from 'next/dynamic';

const WatchlistApp = dynamic(() => import('@quantgate-systems/watchlist'));

//your app's symbol handler
const handler = () => {
  setSymbols(prev => {
    return [...prev, newSymbolToAdd];
  });
};

const onItemClick = instrument => {
  console.log(instrument);
};

return (
  <WatchlistApp
    credentials={{UserName: 'your user name', Password: 'your password'}}
    brokerName={'simulation-mode' || 'demo' || 'signals-only'}
    onItemClick={onItemClick}
    symbols={symbols} //string array of symbols as a callback. Ex above
    onSymbolAdded={symbol => console.log(symbol)}
    miniFilter
    styles={{containerHeight: '100%'}}
  />
);

Note:

brokerName could be one of simulation-mode, demo or signals-only and it will return a watchlist with market data and signals

if you pass miniFilters it will make the filter sizes smaller

and you can also overwrite some styles using styles property. we will add more styles to overwrite in future