import { useEffect } from "react";
import { inBrowser } from "../utils";
function useVisibilityChange(target, onChange) {
  useEffect(() => {
    if (!inBrowser || !window.IntersectionObserver) {
      return null;
    }
    const observer = new IntersectionObserver(
      (entries) => {
        onChange(entries[0].intersectionRatio > 0);
      },
      { root: document.body }
    );
    const observe = () => {
      if (target.current) {
        observer.observe(target.current);
      }
    };
    const unobserve = () => {
      if (target.current) {
        observer.unobserve(target.current);
      }
    };
    observe();
    return unobserve;
  }, [target.current]);
}
export {
  useVisibilityChange as default
};
