Animated Numbers

1'use client'
2 
3import type { ComponentPropsWithoutRef } from 'react'
4import { useEffect, useMemo, useRef } from 'react'
5import {
6  animate,
7  motion,
8  useInView,
9  useMotionValue,
10  useReducedMotion,
11  useTransform,
12} from 'motion/react'
13 
14import { cn } from '@/lib/utils'
15 
16export type AnimatedNumberProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {
17  value: number
18  from?: number
19  prefix?: string
20  suffix?: string
21  decimalPlaces?: number
22  duration?: number
23  delay?: number
24  locale?: string
25}
26 
27export function AnimatedNumber({
28  value,
29  from = 0,
30  prefix = '',
31  suffix = '',
32  decimalPlaces = 0,
33  duration = 1,
34  delay = 0,
35  locale = 'en-US',
36  className,
37  ...props
38}: AnimatedNumberProps) {
39  const ref = useRef<HTMLSpanElement>(null)
40  const shouldReduceMotion = useReducedMotion()
41 
42  const isInView = useInView(ref, {
43    once: true,
44    amount: 0.6,
45  })
46 
47  const animatedValue = useMotionValue(from)
48 
49  const formatter = useMemo(
50    () =>
51      new Intl.NumberFormat(locale, {
52        minimumFractionDigits: decimalPlaces,
53        maximumFractionDigits: decimalPlaces,
54      }),
55    [decimalPlaces, locale],
56  )
57 
58  const formattedValue = useTransform(animatedValue, (currentValue) => {
59    return `${prefix}${formatter.format(currentValue)}${suffix}`
60  })
61 
62  const accessibleValue = `${prefix}${formatter.format(value)}${suffix}`
63 
64  useEffect(() => {
65    if (shouldReduceMotion) {
66      animatedValue.set(value)
67      return
68    }
69 
70    if (!isInView) return
71 
72    const controls = animate(animatedValue, value, {
73      duration,
74      delay,
75      ease: [0.22, 1, 0.36, 1],
76    })
77 
78    return () => controls.stop()
79  }, [animatedValue, delay, duration, isInView, shouldReduceMotion, value])
80 
81  return (
82    <span ref={ref} className={cn('inline-block tabular-nums', className)} {...props}>
83      <motion.span aria-hidden>{formattedValue}</motion.span>
84      <span className="sr-only">{accessibleValue}</span>
85    </span>
86  )
87}
88 
89export default AnimatedNumber