38 lines
815 B
TypeScript
38 lines
815 B
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import dynamic from "next/dynamic";
|
|
import "odometer/themes/odometer-theme-default.css";
|
|
import { useInView } from "react-intersection-observer";
|
|
const Odometer = dynamic(() => import("react-odometerjs"), {
|
|
ssr: false,
|
|
});
|
|
|
|
interface CounterProps {
|
|
value: number;
|
|
}
|
|
|
|
const Counter = ({ value }: CounterProps) => {
|
|
const [odometerValue, setOdometerValue] = useState(0);
|
|
const [ref, inView] = useInView();
|
|
|
|
useEffect(() => {
|
|
if (inView) {
|
|
setTimeout(() => {
|
|
setOdometerValue(value);
|
|
}, 1000);
|
|
}
|
|
}, [inView, value]);
|
|
|
|
return (
|
|
<span ref={ref}>
|
|
{inView ? (
|
|
<Odometer value={odometerValue} format="(,ddd)" theme="default" />
|
|
) : (
|
|
0
|
|
)}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export default Counter;
|