Animated Number

主なプロパティ

TRAnimatedNumber は、アプリケーションの状態から受け取った数値を表示します。タイマーやカウンターの状態は管理しません。既定の roll アニメーションは値の増減方向に変更された数字を移動し、count は数値を連続補間してから同じロケール書式を適用します。初回レンダーでは動かないため、サーバーレンダリングと hydration ですぐに最終値が表示されます。

インストール

pnpm add @tinyrack/ui

@import '@tinyrack/ui/components/animated-number.css';

import { TRAnimatedNumber } from '@tinyrack/ui/components/animated-number';

プレイグラウンド

使用方法

例

API

• value は必須です。値を更新すると選択したアニメーションが始まり、マウント時に 0 からアニメーションすることはありません。
• animation="roll" は整数の桁を右から、小数の桁を左から揃えます。rollDirection はこのモードだけに適用されます。animation="count" は ease-out で補間した数値をフレームごとに書式設定します。
• duration は両方のモードの時間をミリ秒で設定します。0 と負数は最終値を即時表示し、有限でない値は 600 に戻ります。
• format と locale は Intl.NumberFormat に渡されます。いずれかを変更すると、異なる書式間をアニメーションせず、現在値を新しい書式ですぐに表示します。NaN と無限大もアニメーションせずに表示します。
• 視覚的な数字レイヤーは支援技術から隠し、書式設定されたテキストを 1 つだけ残します。値の変更は既定では通知されません。更新を通知する必要がある場合だけ、ネイティブの aria-live に polite を渡してください。
• prefers-reduced-motion が reduce の場合は、実行中の動きをキャンセルして最終値を維持します。ネイティブ span props、イベントハンドラー、スタイル、クラス名、React 19 の ref を転送します。