@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
40 lines • 1.25 kB
JavaScript
import React, { useEffect, useMemo, useState } from 'react';
import { animate, useMotionValue } from 'motion/react';
const DEFAULT_ROUND = Math.round;
const DEFAULT_EASE = [0.16, 1, 0.3, 1];
export const AnimatedNumber = ({
value,
duration = 2,
delay = 0,
locale = 'de',
format,
round = DEFAULT_ROUND,
startFrom = 0,
onComplete,
ease = DEFAULT_EASE
}) => {
const motionValue = useMotionValue(startFrom);
const [display, setDisplay] = useState(startFrom);
const formatter = useMemo(() => {
if (format) return format;
return n => round(n).toLocaleString(locale);
}, [format, locale, round]);
useEffect(() => {
motionValue.set(startFrom);
const controls = animate(motionValue, value, {
duration,
delay,
ease: ease,
onComplete
});
return () => controls.stop();
}, [value, duration, delay, startFrom, onComplete, ease, motionValue]);
useEffect(() => {
const unsub = motionValue.on('change', v => setDisplay(v));
return () => unsub();
}, [motionValue]);
return /*#__PURE__*/React.createElement(React.Fragment, null, formatter(display));
};
AnimatedNumber.displayName = 'AnimatedNumber';
export default AnimatedNumber;
//# sourceMappingURL=AnimatedNumber.js.map