import { useCallback, useState } from 'react'; import { TransitionMotion, spring } from 'react-motion'; import { reduceMotion } from '../initial_state'; import { ShortNumber } from './short_number'; interface Props { value: number; } export const AnimatedNumber: React.FC = ({ value }) => { const [previousValue, setPreviousValue] = useState(value); const [direction, setDirection] = useState<1 | -1>(1); if (previousValue !== value) { setPreviousValue(value); setDirection(value > previousValue ? 1 : -1); } const willEnter = useCallback(() => ({ y: -1 * direction }), [direction]); const willLeave = useCallback( () => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }), [direction], ); if (reduceMotion) { return ; } const styles = [ { key: `${value}`, data: value, style: { y: spring(0, { damping: 35, stiffness: 400 }) }, }, ]; return ( {(items) => ( {items.map(({ key, data, style }) => ( 0 ? 'absolute' : 'static', transform: `translateY(${(style.y ?? 0) * 100}%)`, }} > ))} )} ); };