21 lines
556 B
JavaScript
21 lines
556 B
JavaScript
import { useState, useEffect } from 'react';
|
|
|
|
export function CountUp({ value }) {
|
|
const [v, setV] = useState(0);
|
|
useEffect(() => {
|
|
const start = v;
|
|
const end = value;
|
|
const dur = 600;
|
|
const t0 = performance.now();
|
|
let raf;
|
|
const step = (t) => {
|
|
const p = Math.min(1, (t - t0) / dur);
|
|
setV(Math.round(start + (end - start) * p));
|
|
if (p < 1) raf = requestAnimationFrame(step);
|
|
};
|
|
raf = requestAnimationFrame(step);
|
|
return () => cancelAnimationFrame(raf);
|
|
}, [value]);
|
|
return <span>{v}</span>;
|
|
}
|