56 lines
1.3 KiB
JavaScript
56 lines
1.3 KiB
JavaScript
import { useEffect, useRef, useState } from "react";
|
|
|
|
export default function Counter({ end, duration }) {
|
|
const [count, setCount] = useState(0);
|
|
const countRef = useRef(null);
|
|
const increment = end / duration;
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
([entry]) => {
|
|
if (entry.isIntersecting) {
|
|
startCount();
|
|
observer.disconnect();
|
|
}
|
|
},
|
|
{ threshold: 0 }
|
|
);
|
|
|
|
if (countRef.current) {
|
|
observer.observe(countRef.current);
|
|
}
|
|
|
|
return () => {
|
|
observer.disconnect();
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setCount((prevCount) => {
|
|
const newCount = prevCount + increment;
|
|
if (newCount >= end) {
|
|
clearInterval(interval);
|
|
return end;
|
|
} else {
|
|
return newCount;
|
|
}
|
|
});
|
|
}, 1000 / duration);
|
|
|
|
return () => {
|
|
clearInterval(interval);
|
|
};
|
|
}, [end, increment]);
|
|
|
|
const startCount = () => {
|
|
setCount(0);
|
|
};
|
|
|
|
return (
|
|
<span ref={countRef}>
|
|
<span>{Math.round(count)}</span>
|
|
</span>
|
|
);
|
|
}
|