NumberValue

Number that counts up to value, formatted with Intl. Assistive tech reads the final value at once; the animated text is hidden from it so it is not announced digit by digit.

Import

import { NumberValue } from "@jcsoftdev/ui/atoms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/atoms/number-value.

Usage

<NumberValue
  value={12840}
  duration={900}
  format={{ style: "currency", currency: "PEN" }}
/>

Props

Prop	Type	Default	Description
value *	number
format	NumberFormatConfig		Intl options plus locale, e.g. { style: "currency", currency: "PEN" }.
duration	number	900	Animation length in ms. No animation under prefers-reduced-motion.
from	number	0	Count up from this value on first render.
animateOnMount	boolean	true	When false, only later changes of value animate.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Percent
• Compact
• Updating
• Narrow
• Brutal Preset

Source

packages/ui/src/atoms/number-value/number-value.tsx