Ticker
A number that rolls to its new value, digit by digit.
Preview
tsx
import { state } from '@kerf-js/core'import { Button, Row, Text, Ticker} from '@kerf-js/veneer'export function Step() { const n = state(412) return ( <Row gap="related"> <Text role="title"> <Ticker value={n.value} locale="en-US" /> </Text> <Button size="sm" emphasis="outline" tone="neutral" onClick={() => (n.value += 1)} > Deploy </Button> <Button size="sm" emphasis="outline" tone="neutral" onClick={() => (n.value += 88)} > Add 88 </Button> </Row> )}Installation
npm install @kerf-js/veneerTry it
Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.
Live preview
Controls
Value
Locale
Codeupdates as you change the controls
import { Ticker } from '@kerf-js/veneer'<Ticker value={1248120} locale="en-US" />Usage
tsx
import { Ticker } from '@kerf-js/veneer'Formats
format takes anything Intl.NumberFormat does.
tsx
import { state } from '@kerf-js/core'import { Button, Row, Stack, Text, Ticker} from '@kerf-js/veneer'export function Formats() { const k = state(0) const roll = () => (k.value = k.value ? 0 : 1) return ( <Stack gap="related" align="center" > <Row gap="section"> <Text role="heading"> <Ticker value={k.value ? 8930 : 8560} locale="en-US" format={{ style: 'currency', currency: 'USD', }} /> </Text> <Text role="heading"> <Ticker value={k.value ? 0.9998 : 0.9942} locale="en-US" format={{ style: 'percent', maximumFractionDigits: 2, }} /> </Text> <Text role="heading"> <Ticker value={k.value ? 86100000 : 79300000} locale="en-US" format={{ notation: 'compact' }} /> </Text> </Row> <Button size="sm" emphasis="ghost" tone="neutral" onClick={roll} > Change the numbers </Button> </Stack> )}Live figures
Pass a changing value to Ticker and the figure follows it.
tsx
import { onCleanup, state } from '@kerf-js/core'import { Card, Grid, Text, Ticker } from '@kerf-js/veneer'export function LiveTraffic() { const rate = state(18420) const errors = state(41) const timer = setInterval(() => { rate.value += Math.round(Math.random() * 120 - 50) errors.value = Math.max( 0, errors.value + Math.round(Math.random() * 4 - 2), ) }, 1400) onCleanup(() => clearInterval(timer)) return ( <Grid cols={2} gap="related" > <Card eyebrow="Requests a minute"> <Text role="title"> <Ticker value={rate.value} locale="en-US" /> </Text> </Card> <Card eyebrow="Errors a minute"> <Text role="title"> <Ticker value={errors.value} locale="en-US" /> </Text> </Card> </Grid> )}When to use
Use it for
- A figure that changes while people watch
Reach for something else
- Text, when the number stays the same
Accessibility
- The real number is in the page for screen readers, and the digits are hidden from them.
- Under reduced motion the number swaps without rolling.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | The number. |
format | NumberFormatOptions | — | Passed to Intl.NumberFormat: { style: 'currency', currency: 'USD' }. |
locale | string | — | Set it so server and browser format the same way. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="ticker"] [data-part="sr"]
srdigitsym