Ticker Symbol Search

Seamlessly integrate a search engine to find live ticker symbols into your web app.

Installation

npm install ticker-symbol-search

or

yarn add ticker-symbol-search

Quick Start

Search Component

import { TickerSymbolSearch } from ticker-symbol-search

export default () => {
    const customTheme = {
      paper: {
        background: "rgba(128, 128, 128, 0.75)",
        color: "white",
      },
      search: {
        icon: {
          color: "rgba(188, 204, 221, 0.25)",
        },
        input: {
          color: "white",
          placeholderColor: "rgba(188, 204, 221, 0.25)",
        },
      },
      markets: {
        background: "rgba(0, 0, 0, 0.25)",
        color: "white",
      },
      selector: {
        color: "white",
      },
    }

    return <TickerSymbolSearch
              callback = {(data) => console.log(data)}
              theme={customTheme} // optional
            />;
}

Hook

import { useSearchSymbols } from ticker-symbol-search

export default () => {
    const { symbols,
            isSuccess,
            isLoading,
            isError } = useSearchSymbols(search, market);
}

where,

search ticker symbol query

market "ALL" | "Futures" | "Forex" | "CFD" | "Crypto" | "Index" | "Economic"

Symbol Data Fetched

Through callback or hook

{
  "symbol": "<em>AAPL</em>",
  "description": "APPLE INC",
  "type": "stock",
  "exchange": "NASDAQ",
  "provider_id": "ice",
  "typespecs": ["common"],
  "country": "US"
}

Development

To develop this package you need to install its dependencies and the dependencies of the example to test your changes

  • Run npm install in root and /example

To concurrently develop and watch for your changes do the following:

  • yarn build:watch in root to build your package
  • yarn startin /exampleto run the React app to test

GitHub

https://github.com/harsohailB/ticker-symbol-search