Ticker

A number that rolls to its new value, digit by digit.

SourcePackage @weft-js/warpPlayground

Preview

tsx

import { state } from '@weft-js/core'import { Button, Row, Text, Ticker } from '@weft-js/warp'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 @weft-js/warp

Usage

tsx

import { Ticker } from '@weft-js/warp'

Formats

format takes anything Intl.NumberFormat does.

tsx

import { state } from '@weft-js/core'import { Button, Row, Stack, Text, Ticker } from '@weft-js/warp'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 '@weft-js/core'import { Card, Grid, Text, Ticker } from '@weft-js/warp'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

Playground

Value1248120

Locale

en-USde-DEen-IN

import { Ticker } from '@weft-js/warp'<Ticker value={1248120} locale="en-US" />

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

RelatedText Card Sparkline