import { useEffect, useRef, useState } from 'react' import { motion } from "framer-motion" export const SpinningNumberExample = () => { const [value, setValue] = useState(404) useEffect(() => { const interval = setInterval(() => { setValue(prev => prev + 1) }, 500) return () => { clearInterval(interval) } }, []) return (

) } type SpinningNumberProps = React.DetailedHTMLProps, HTMLDivElement> & { value: number, animationDuration?: number } const SpinningNumber = ({ value, animationDuration = 500, className, ...props }: SpinningNumberProps) => { const ref = useRef(null) const [splitted, setSplitted] = useState(value.toString().split("")) const [lineHeight, setLineHeight] = useState(0); useEffect(() => { const element = ref.current; if (element) { const tempElement = document.createElement('span'); tempElement.style.fontSize = window.getComputedStyle(element).fontSize; tempElement.style.fontFamily = window.getComputedStyle(element).fontFamily; tempElement.style.lineHeight = window.getComputedStyle(element).lineHeight; tempElement.innerHTML = 'dummy'; element.appendChild(tempElement); setLineHeight(tempElement.offsetHeight); element.removeChild(tempElement); } }, [lineHeight]); useEffect(() => { setSplitted(value.toString().split("")) }, [value]) return (

{splitted.map((num, i) => )}

) } type SingleNumberProps = { number: number, index: number, lineHeight: number, animationDuration: number } const SingleNumber = ({ number, index, lineHeight, animationDuration }: SingleNumberProps) => { const nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] const [y, setY] = useState((-1) * (nums.indexOf(number)) * lineHeight) useEffect(() => { setY((-1) * (nums.indexOf(number)) * lineHeight) }, [number, lineHeight]) return ( {nums.map((digit) => ( {digit} ))} ) }

Number

Spinning Number