29 lines
904 B
TypeScript
29 lines
904 B
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
import { motion, useInView, useSpring, useTransform } from 'framer-motion';
|
|
|
|
interface CounterProps {
|
|
value: number;
|
|
}
|
|
|
|
const Counter: React.FC<CounterProps> = ({ value }) => {
|
|
const ref = useRef(null);
|
|
const isInView = useInView(ref, { once: true, margin: "-20%" });
|
|
// Using slow/heavy physics as requested for premium feel
|
|
const spring = useSpring(0, { mass: 3, stiffness: 75, damping: 30 });
|
|
|
|
const display = useTransform(spring, (current) =>
|
|
// formatting: if decimal exists in target, show 1 decimal, else integer
|
|
value % 1 !== 0 ? current.toFixed(1) : Math.round(current).toLocaleString()
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (isInView) {
|
|
spring.set(value);
|
|
}
|
|
}, [isInView, value, spring]);
|
|
|
|
return <motion.span ref={ref}>{display}</motion.span>;
|
|
};
|
|
|
|
export default Counter;
|