Intersection Observer Hook
// use-is-onscreen.js
import React from "react";
function useIsOnscreen(elementRef) {
const [isOnscreen, setIsOnscreen] = React.useState(false);
React.useEffect(() => {
const observer = new IntersectionObserver((entries) => {
const [entry] = entries;
setIsOnscreen(entry.isIntersecting);
});
observer.observe(elementRef.current);
return () => {
observer.disconnect();
};
}, [elementRef]);
return isOnscreen;
}
export default useIsOnscreen;