React Animated Number

by KyleBelle

HTML

<div id="root"></div>
<div id="other-div"></div>

CSS

body {
  height: 100vh;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  text-align: center
}

#root, #other-div {
  width: 100%;
}

React

const {useState, useRef, useEffect} = React;

const _period = 10000

const AnimationNumber = ({ number, intervalTime=10, period=_period }) => {
  const countEl = useRef(null);
	const count = useRef(0);
  
  useEffect(() => {
  	const interval = setInterval(() => {
      if (count.current < number) {
      	const amountPerRun = number * (intervalTime/period);
        count.current+=amountPerRun;
        countEl.current.innerText = Math.min(number, Math.floor(count.current));
        return;
      }

      clearInterval(interval)
      console.log('done!', number);
    }, intervalTime);
    
  	return  () => clearInterval(interval)
  }, []);
  
  return (
    <div>
      <strong>
        <span ref={countEl} />
      </strong>
    </div>
  );
};

function Example() {
  return (
    <div>
      <AnimationNumber number={700}  />
      <AnimationNumber number={100} />
      <AnimationNumber number={470}  />
    </div>
  );
}

ReactDOM.render( <Example />, document.getElementById('root') );