Counter with react-countup only when the counter in viewport

app.js

import Counter from './counter';

const App = () => (
	<div className='flex flex-wrap justify-between md:justify-center'>
		<Counter target={150} title='Customer' duration={1} />
		<Counter target={20000} title='Rooms' duration={2} />
		<Counter target={40000} title='Places' duration={3} />
		<Counter target={1200000} title='Users' duration={4} />
	</div>
	);

export default App;

counter.js

import { useInView } from 'react-intersection-observer';
import CountUp from 'react-countup';

const Counter = ({ target, title, duration }) => {
	const [ref, inView] = useInView({
		threshold: 0.3,
		triggerOnce: true,
	});

	return (
		<div className='w-full md:w-1/4 p-2 md:p-4 text-center flex flex-col items-center' ref={ref}>
			<CountUp
				start={0}
				end={inView ? target : 0}
				duration={duration}
				separator='.'
				useEasing={true}>
				{({ countUpRef }) => (
					<span className='text-2xl md:text-4xl font-black leading-none' ref={countUpRef} />
				)}
			</CountUp>
			<p
				className={`font-bold text-lg animation delay ${
					inView === true ? 'opacity-100 transform-show' : 'opacity-0 transform-hide'
				}`}>
				{title}
			</p>
			<style jsx>{`
				.delay {
					transition-delay: ${duration}s;
				}
				.transform-hide {
					transform: translate3d(0, 1rem, 0);
				}
				.transform-show {
					transform: translate3d(0, 0, 0);
				}
			`}</style>
		</div>
	);
};

export default Counter;

@omarkhatibco You no longer need useInView hook. Instead, just set the options within the <CountUp> component itself:

<CountUp
  start={0}
  end={1000}
  duration={3}
  enableScrollSpy={true} // set this to true
  scrollSpyOnce={true}   // set this to true
/>