56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useEffect, useRef } from "react";
|
||
|
|
import { useInView, useMotionValue, useSpring } from "framer-motion";
|
||
|
|
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
export default function NumberTicker({
|
||
|
|
value,
|
||
|
|
direction = "up",
|
||
|
|
delay = 0,
|
||
|
|
className,
|
||
|
|
}: {
|
||
|
|
value: number;
|
||
|
|
direction?: "up" | "down";
|
||
|
|
className?: string;
|
||
|
|
delay?: number; // delay in s
|
||
|
|
}) {
|
||
|
|
const ref = useRef<HTMLSpanElement>(null);
|
||
|
|
const motionValue = useMotionValue(direction === "down" ? value : 0);
|
||
|
|
const springValue = useSpring(motionValue, {
|
||
|
|
damping: 60,
|
||
|
|
stiffness: 100,
|
||
|
|
});
|
||
|
|
const isInView = useInView(ref, { once: true, margin: "0px" });
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
isInView &&
|
||
|
|
setTimeout(() => {
|
||
|
|
motionValue.set(direction === "down" ? 0 : value);
|
||
|
|
}, delay * 1000);
|
||
|
|
}, [motionValue, isInView, delay, value, direction]);
|
||
|
|
|
||
|
|
useEffect(
|
||
|
|
() =>
|
||
|
|
springValue.on("change", (latest) => {
|
||
|
|
if (ref.current) {
|
||
|
|
ref.current.textContent = Intl.NumberFormat("en-US").format(
|
||
|
|
latest.toFixed(0)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
[springValue]
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
className={cn(
|
||
|
|
"inline-block tabular-nums text-black dark:text-white tracking-wider",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
ref={ref}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|