Statistic
statisticFormats numeric values with precision, separators, prefixes, suffixes, optional animation, or a countdown.
Usage
Basic usage
number is formatted to thousandths, and string is output as is.
Active User
112,893
tsx
<Statistic title="Active User" value={112893} />Precision and suffix
precision controls the decimal place, and prefix/suffix connects to the currency symbol or unit.
Account balance
¥89,234.56
Conversion rate
68.4%
tsx
<>
<Statistic title="Account Balance" value={89234.56} precision={2} prefix="¥" />
<Statistic title="Conversion rate" value={68.4} precision={1} suffix="%" />
</>Admission rolling
animate connects to NumberTicker to do numerical rolling entry (only valid for number).
Total Order
0
tsx
<Statistic title="Total Order" value={45219} animate />Custom color
valueStyle covers the numerical row style and can express rising and falling colors.
Compared with yesterday
↑11.28%
tsx
<Statistic
title="More than yesterday"
value={11.28}
precision={2}
prefix="↑"
suffix="%"
valueStyle={{ color: "var(--color-success)" }}
/>Countdown
Statistic.Countdown counts down to the deadline in real time; format controls the display template (supports D/H/m/s/S).
The event ends
00:00:00
tsx
<Statistic.Countdown title="The event ends" deadline={Date.now() + 1000 * 60 * 60} />When to use
Use Statistic to format a single number or render a countdown through Statistic.Countdown. Stat is the complementary full KPI card with label, value, and comparison trend.
Import
ts
import { Statistic, formatStatistic, formatCountdown } from "@hulianui/ui"Props
Statistic
| Name | Type | Default | Description |
|---|---|---|---|
| value* | number | string | — | Numbers receive grouping and precision; strings render unchanged. |
| precision | number | — | Decimal places for numeric values. |
| groupSeparator | boolean | true | Enables thousands grouping. |
| animate | boolean | false | Uses NumberTicker entrance animation for numbers; animated values always group. |
| valueStyle | CSSProperties | — | Inline value color, size, or other styles. |
| align | "start" | "center" | "end" | "start" | Horizontal value alignment. |
| className | string | — | Custom class name. |
Statistic.Countdown
| Name | Type | Default | Description |
|---|---|---|---|
| deadline* | number | — | Millisecond deadline on the same basis as Date.now(). |
| format | string | "HH:mm:ss" | Template supporting D/H/HH/m/mm/s/ss/S/SS/SSS. |
| valueStyle | CSSProperties | — | Inline value styles. |
| className | string | — | Custom class name. |
Events
Statistic.Countdown
| Event | Type | Description |
|---|---|---|
| onFinish | () => void | Fires once when the countdown reaches zero. |
Slots
Statistic
| Slot | Type | Description |
|---|---|---|
| title | ReactNode | Label above the value. |
| prefix | ReactNode | Currency symbol, icon, or other prefix. |
| suffix | ReactNode | Unit or other suffix. |
Statistic.Countdown
| Slot | Type | Description |
|---|---|---|
| title | ReactNode | Countdown title. |
| prefix | ReactNode | Countdown prefix. |
| suffix | ReactNode | Countdown suffix. |
Pitfalls
- Initialize countdown deadlines once with
useState(() => Date.now() + ...); computing them during every render drifts and can cause hydration mismatches. - The value row is flex, so
text-centeron className does not align it; usealign. - Precision and grouping affect numeric values only. Strings render verbatim.
Related
Playground
¥112,893
<Statistic value={112893} precision={0} prefix="¥" />