Animated Number

1'use client'
2 
3import { useAnimatedNumber } from '@/registry/hooks/use-animated-number'
4import { ReactNode } from 'react'
5 
6interface AnimatedNumberProps {
7  /**
8   * The target value to animate to
9   */
10  value: number
11  /**
12   * Duration of the animation in milliseconds
13   * @default 1000
14   */
15  duration?: number
16  /**
17   * Easing function for the animation
18   * @default 'easeOut'
19   */
20  easing?: 'linear' | 'easeOut' | 'easeIn' | 'easeInOut' | 'spring'
21  /**
22   * Starting value for the animation
23   * @default 0
24   */
25  from?: number
26  /**
27   * Delay before starting animation in milliseconds
28   * @default 0
29   */
30  delay?: number
31  /**
32   * Custom formatter function
33   */
34  formatter?: (value: number) => ReactNode
35  /**
36   * Additional className for the wrapper span
37   */
38  className?: string
39}
40 
41/**
42 * A component that animates a number from a start value to an end value,
43 * with viewport detection to only animate when visible.
44 */
45export function AnimatedNumber({
46  className,
47  delay = 0,
48  duration = 1000,
49  easing = 'easeOut',
50  formatter,
51  from = 0,
52  value: targetValue,
53}: AnimatedNumberProps) {
54  const { ref, value } = useAnimatedNumber(targetValue, {
55    delay,
56    duration,
57    easing,
58    from,
59  })
60 
61  const displayValue = formatter ? formatter(value) : value.toLocaleString()
62 
63  return (
64    <span ref={ref as React.RefObject<HTMLSpanElement>} className={className}>
65      {displayValue}
66    </span>
67  )
68}