Componentdata-display

Number Ticker

Stable

Um número que conta até o próprio valor na primeira vez em que entra na tela — ou regressivamente, com `direction="down"`. A contagem é ornamento e o número é o conteúdo: o leitor de tela recebe o número de destino desde o primeiro render, nunca um quadro da contagem, e sob movimento reduzido o número aparece de uma vez. `locale` define o agrupamento e o separador decimal; combine-o com o idioma da página.

Instalação

npx up-web-ds add number-ticker

Preview

Basic

100

Decimal Places

5.25

Count Down

0

Start Value

10.000

Locale

pt-BR
1.234.567,89
en-US
1,234,567.89

In Sentence

Os componentes nativos falam 3 durações de motion: fast, default e slow.

Figures

types na taxonomia
6
domínios de produto
5
providers de ícones
4
durações na escala de motion
3

All states

Basic

100

Decimal Places

5.25

Count Down

0

Start Value

10.000

Locale

pt-BR
1.234.567,89
en-US
1,234,567.89

In Sentence

Os componentes nativos falam 3 durações de motion: fast, default e slow.

Figures

types na taxonomia
6
domínios de produto
5
providers de ícones
4
durações na escala de motion
3

Usage

@/components/number-ticker
import { NumberTicker } from '@/components/number-ticker'
Number Ticker
<NumberTicker value={100} />

Props

Props de NumberTicker
PropTypeDefaultDescription
value, obrigatórianumbersem valor padrãoThe number to count to -- or, with `direction="down"`, to count from.
decimalPlacesnumber0Fraction digits, always shown -- `2` prints `5.00`, not `5`.
delaynumber0Seconds to wait, once the ticker is in view, before the count starts. Ignored under reduced motion, where the number is shown at once.
direction"up" | "down"'up'`up` counts from `startValue` to `value`; `down` from `value` to `startValue`.
localeIntl.LocalesArgument'en-US'Locale for the digit grouping and the decimal separator. Match it to the page language: a screen reader reads the number the way it is written.
startValuenumber0The other end of the count: where it starts counting up from, or where it lands counting down.

Estende ComponentPropsWithoutRef<'span'>. Aceita também os atributos padrão de um elemento React (279 não listados).

prop obrigatória.

Metadata

Notas de acessibilidade

Verificado em number-ticker.test.tsx e em tests/e2e/number-ticker.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA. Teclado: o componente é texto, não é interativo e não entra na sequência de Tab; verificado em navegador que nenhum Tab pousa dentro dele. Leitor de tela verificado por teste e pela árvore de acessibilidade do navegador: os dígitos que contam são aria-hidden, e uma cópia sr-only carrega o número de destino desde o primeiro render — o upstream reescrevia o texto a cada quadro do spring, e um leitor que chegasse no meio da contagem lia o quadro da vez. Não é região live de propósito: uma contagem anunciada sessenta vezes por segundo é ruído, e um valor que muda depois é lido na próxima vez que alguém chegar nele. `locale` existe porque o leitor lê o número como ele está escrito: "1,000" numa página em português é um vírgula zero zero zero. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — a contagem é decorativa: via useReducedMotion o número de destino aparece de uma vez, sem contagem, sem `delay` e sem esperar entrar na tela, e nenhum quadro intermediário é pintado. Touch verificado em viewport de 320px com emulação de toque: nenhum exemplo provoca rolagem horizontal, e a linha de números passa de quatro para duas colunas.

Classificação

Layer
Component
Domínio
Application
Categoria
data-display
Status
Stable

Origem e distribuição

Fonte
magic registry / number-ticker
Licença
MIT
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
motion
Ícones
Nenhum
Construído sobre
Nenhum
Usado por
Nenhum ainda