Animated Number

A number that springs from 0 up to value on mount (and whenever value changes). It starts at 0 on both server and client, so it is safe to render during SSR and hydration. Use suffix for units and decimals for fractional precision.

Import

tsx

1import { AnimatedNumber } from "@yuhuanowo/yunui";

Basic

Count up

With a suffix

Append a unit such as % or K with the suffix prop.

Suffix

Decimals

Set decimals for fractional values; trailing zeros are stripped.

Decimal places

Props

Prop	Type	Default	Description
decimals	number	0	Decimal places; trailing zeros are stripped (100.00 → 100).
immediate	boolean	—	Skip the animation and print `value` immediately. Left undefined, this turns itself on in the two cases where a spring is wrong rather than merely unwanted: when the reader has asked for reduced motion, and under a test runner. In jsdom nothing drives the animation frame, so a spring never leaves 0 — a component that counted up would assert as `"0"` forever, which is why Yunxin's copy of this carried its own `NODE_ENV === "test"` escape hatch. Pass an explicit boolean to override.
suffix	string	—
value*	number	—