React useIntersectionObserver hook
React, Hooks, State, Effect · Sep 10, 2021

Observes visibility changes for a given element.
- Use the
useState()
hook to store the intersection value of the given element. - Create an
IntersectionObserver
with the givenoptions
and an appropriate callback to update theisIntersecting
state variable. - Use the
useEffect()
hook to callIntersectionObserver.observe()
when mounting the component and clean up usingIntersectionObserver.unobserve()
when unmounting.
const useIntersectionObserver = (ref, options) => {
const [isIntersecting, setIsIntersecting] = React.useState(false);
React.useEffect(() => {
const observer = new IntersectionObserver(([entry]) => {
setIsIntersecting(entry.isIntersecting);
}, options);
if (ref.current) {
observer.observe(ref.current);
}
return () => {
observer.unobserve(ref.current);
};
}, []);
return isIntersecting;
};
const MyApp = () => {
const ref = React.useRef();
const onScreen = useIntersectionObserver(ref, { threshold: 0.5 });
return (
<div>
<div style={{ height: '100vh' }}>Scroll down</div>
<div style={{ height: '100vh' }} ref={ref}>
<p>{onScreen ? 'Element is on screen.' : 'Scroll more!'}</p>
</div>
</div>
);
};
ReactDOM.createRoot(document.getElementById('root')).render(
<MyApp />
);
Written by Angelos Chalaris
I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.
If you want to keep in touch, follow me on GitHub.