NumberTicker

1"use client";
2import { useEffect, useRef } from "react";
3import { useInView, useMotionValue, useSpring } from "motion/react"
4 
5import { cn } from "@/lib/utils"
6 
7export function NumberTicker({
8  value,
9  startValue = 0,
10  direction = "up",
11  delay = 0,
12  className,
13  decimalPlaces = 0,
14  ...props
15}) {
16  const ref = useRef(null)
17  const motionValue = useMotionValue(direction === "down" ? value : startValue)
18  const springValue = useSpring(motionValue, {
19    damping: 60,
20    stiffness: 100,
21  })
22  const isInView = useInView(ref, { once: true, margin: "0px" })
23 
24  useEffect(() => {
25    let timer = null
26 
27    if (isInView) {
28      timer = setTimeout(() => {
29        motionValue.set(direction === "down" ? startValue : value)
30      }, delay * 1000)
31    }
32 
33    return () => {
34      if (timer !== null) {
35        clearTimeout(timer)
36      }
37    };
38  }, [motionValue, isInView, delay, value, direction, startValue])
39 
40  useEffect(() =>
41    springValue.on("change", (latest) => {
42      if (ref.current) {
43        ref.current.textContent = Intl.NumberFormat("en-US", {
44          minimumFractionDigits: decimalPlaces,
45          maximumFractionDigits: decimalPlaces,
46        }).format(Number(latest.toFixed(decimalPlaces)))
47      }
48    }), [springValue, decimalPlaces])
49 
50  return (
51    <span
52      ref={ref}
53      className={cn(
54        "inline-block tracking-wider text-black tabular-nums dark:text-white",
55        className
56      )}
57      {...props}>
58      {startValue}
59    </span>
60  );
61}
62