CountUp

Spring-animated number counter. By default, the animation triggers automatically when the element scrolls into view via IntersectionObserver.

Props

Prop	Type	Default	Description
`from`	`number`	`0`	Starting value
`to`	`number`	`100`	Target value
`duration`	`number`	`2000`	Animation duration in milliseconds
`decimals`	`number`	`0`	Number of decimal places
`prefix`	`string`	`''`	Text rendered before the number
`suffix`	`string`	`''`	Text rendered after the number
`autoStart`	`boolean`	`true`	Trigger on scroll into view. When `false`, only starts via `ref.start()`.
`formatter`	`(value: number) => string`	—	Custom number formatter
`className`	`string`	—	Container className
`style`	`CSSProperties`	—	Container style

Ref Handle

Method	Description
`start()`	Start the animation from `from` to `to`
`reset()`	Reset to the `from` value without animating

Example


<CountUp from={0} to={1573} prefix="$" duration={2000} />


const countRef = useRef<CountUpHandle>(null)
 
<CountUp
  ref={countRef}
  from={0}
  to={99.9}
  decimals={1}
  suffix="%"
  autoStart={false}
/>
 
<button onClick={() => countRef.current?.start()}>Animate</button>