| 14 | } |
| 15 | |
| 16 | export function AnimatedNumber({ |
| 17 | value, |
| 18 | mass = 0.8, |
| 19 | stiffness = 75, |
| 20 | damping = 15, |
| 21 | precision = 0, |
| 22 | format = (num) => num.toLocaleString(), |
| 23 | onAnimationStart, |
| 24 | onAnimationComplete, |
| 25 | }: AnimatedNumberProps) { |
| 26 | const spring = useSpring(value, { mass, stiffness, damping }); |
| 27 | const display: MotionValue<string> = useTransform(spring, (current) => |
| 28 | format(parseFloat(current.toFixed(precision))) |
| 29 | ); |
| 30 | |
| 31 | useEffect(() => { |
| 32 | spring.set(value); |
| 33 | if (onAnimationStart) onAnimationStart(); |
| 34 | const unsubscribe = spring.onChange(() => { |
| 35 | if (spring.get() === value && onAnimationComplete) onAnimationComplete(); |
| 36 | }); |
| 37 | return () => unsubscribe(); |
| 38 | }, [spring, value, onAnimationStart, onAnimationComplete]); |
| 39 | |
| 40 | return <motion.span>{display}</motion.span>; |
| 41 | } |