Checking if a component is seen on the person display could be very simple utilizing the Intersection Observer API. This API is supported by all main browsers.
The Intersection Observer API permits us to detect intersections of a component with one other aspect. In our case we’re going to observe for interceptions between a React aspect and the browser viewport.
We’re going to create a customized hook for this to reuse this code the place we’d like it.
In our customized hook we’re going to to make use of useState to retailer the intersection standing of the aspect.
export operate useIsVisible() {
const [isIntersecting, setIntersecting] = useState(false);
return isIntersecting;
}
The hook wants a reference to the React aspect that we wish to observe. We’re going to use the ref prop to cross the aspect to the hook.
export operate useIsVisible(ref) {
const [isIntersecting, setIntersecting] = useState(false);
return isIntersecting;
}
Lastly, we have to create an occasion of IntersectionObserver and observe the aspect. The IntersectionObserver constructor accepts a callback operate as first argument that is known as when the aspect is intersecting with the viewport.
We’re going to use the useEffect hook to do that to keep away from creating new observers on rerenders.
export operate useIsVisible(ref) {
const [isIntersecting, setIntersecting] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(([entry]) =>
setIntersecting(entry.isIntersecting)
);
observer.observe(ref.present);
}, [ref]);
return isIntersecting;
}
To enhance efficiency, we’re going to name IntersectionObserver.disconnect() to cease anticipating modifications when the part is unmounted or a brand new aspect is handed to the hook.
export operate useIsVisible(ref) {
const [isIntersecting, setIntersecting] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(([entry]) =>
setIntersecting(entry.isIntersecting)
);
observer.observe(ref.present);
return () => {
observer.disconnect();
};
}, [ref]);
return isIntersecting;
}
Our hook is prepared for use. To make use of it we solely have to name it from a React part and cross a reference to the aspect that we wish to test if it is seen or not.
export operate MyComponent() {
const ref = useRef();
const isVisible = useIsVisible(ref);
return (
<div ref={ref}>
<p>{isVisible ? "Seen" : "Not seen"}</p>
</div>
);
}
You’ll be able to see an actual utilization instance of this hook in my web site. I am utilizing the hook to detect if the person scrolls to the underside of the web page after which load the feedback of a weblog publish. You’ll be able to see the supply code of the part right here. Enter any of the weblog posts and scroll to the underside of the web page to see it in motion.
