Using Stock Tickers in Your Posts

When writing market analysis or discussing stock performance, you can easily include stock tickers with their real-time percentage changes using the StockTicker component.

Real-Time Examples

Today the S&P 500 SPY (+2.48%) and the Nasdaq QQQ (+3.17%) are showing live performance data fetched directly from Yahoo Finance.

Some tech stocks like AAPL (+5.18%) and MSFT (+1.02%) are also displaying live data, while META (+6.51%) shows the current trading information.

Manual Examples (Static Data)

You can also provide static percentage values when needed:

Today the S&P 500 SPY (+1.5%) showed strong performance, while the Nasdaq QQQ (+2.3%) outperformed.

Using the Component

To use this component in your MDX posts:

1. Import the component at the top of your MDX file:

import StockTicker from '@components/StockTicker.astro';

2. Use the component in your text for real-time data:

<StockTicker symbol="AAPL" />

3. Or specify a static change value (useful for historical posts):

<StockTicker symbol="AAPL" change={-2.5} />

The component takes these props:

• symbol: The stock ticker symbol (string) - required
• change: The percentage change (number) - optional. If omitted, real-time data will be fetched from Yahoo Finance.

The component will automatically format the percentage with a plus or minus sign and color code it based on whether it’s positive or negative.