Price Ticker

A live price with its change. The flash on update is colour only — a ticker that moves makes the whole page twitch — and it compares against the previous rendered price, not the day’s direction.

src/components/ui/price-ticker.tsx

About

From the component's own source, where it was written.

A live price with its change over a window.

The flash on update is a colour transition and nothing else — no scale, no slide — which keeps it inside the kit's motion rule and, more practically, stops a ticker updating every second from making the whole page twitch.

The flash compares against the *previous rendered* price, held in a ref. Deriving it from the change percentage instead would flash green on every tick of a day that is up, which tells you nothing about the tick.

Prices are given as numbers here rather than base units: a quote is a market rate, not a balance, so it never needs bigint exactness — but it does need enough fraction digits, hence precision defaulting by magnitude.

Install

npx astralyx-ui add price-ticker

Usage

import { PriceTicker } from '@/components/ui/price-ticker'

<PriceTicker symbol="BTC" price={price} change={2.41} history={history} />

Composer

Change the props and the source below follows.

BTCUS$67,240.00
2.41%24h
Props
tsx
<PriceTicker symbol="BTC" price={price} change={2.41} size="lg" />

Examples

Live tick

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

PriceTicker

Extends Omit<ComponentProps<'div'>, 'children'>.

PropTypeDefaultDescription
symbolReactNoderequired—
pricenumberrequiredChange is a percentage over window.
changenumber—Change is a percentage over window.
windowstring'24h'—
currencystring'USD'—
localestring'en-GB'—
precisionnumber—Defaults by magnitude — a $0.000042 token needs eight digits where a $67,000 one needs two.
historynumber[]—Rendered as a Sparkline tinted by direction.
iconReactNode——
size'sm' | 'default' | 'lg''default'—

Behaviour

TopicDetailDescription
flashautomaticCompares against the previous rendered price held in a ref. Deriving it from the day’s change would flash green on every tick of an up day.