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.tsxAbout
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.
<PriceTicker symbol="BTC" price={price} change={2.41} size="lg" />Examples
Live tick
<PriceTicker symbol="BTC" price={price} change={2.41} />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'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| symbol | ReactNode | required | — |
| price | number | required | Change is a percentage over window. |
| change | number | — | Change is a percentage over window. |
| window | string | '24h' | — |
| currency | string | 'USD' | — |
| locale | string | 'en-GB' | — |
| precision | number | — | Defaults by magnitude — a $0.000042 token needs eight digits where a $67,000 one needs two. |
| history | number[] | — | Rendered as a Sparkline tinted by direction. |
| icon | ReactNode | — | — |
| size | 'sm' | 'default' | 'lg' | 'default' | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| flash | automatic | Compares 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. |