23 lines
714 B
TypeScript
23 lines
714 B
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import { animate, motion, useMotionValue, useTransform } from "framer-motion";
|
|
|
|
export function Counter({ countNum }: { countNum: number }) {
|
|
const count = useMotionValue(0);
|
|
const rounded = useTransform(count, (latest:any) => Math.round(latest));
|
|
const [displayValue, setDisplayValue] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const controls = animate(count, countNum, {
|
|
duration: 2,
|
|
ease: "easeOut",
|
|
onUpdate: (latest:any) => {
|
|
setDisplayValue(Math.round(latest));
|
|
},
|
|
});
|
|
|
|
return () => controls.stop();
|
|
}, [countNum]); // countNum dependency qo'shildi
|
|
|
|
return <motion.span>{displayValue}</motion.span>;
|
|
} |