'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');

const DEFAULT_IS_VISIBLE = false;
const DEFAULT_OFFSET = "0px";

const useOnScreen = (offset = DEFAULT_OFFSET) => {
  const ref = React.useRef(null);
  const [isOnScreen, setIsOnScreen] = React.useState(DEFAULT_IS_VISIBLE);
  React.useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setIsOnScreen(entry.isIntersecting);
      }
    }, {
      offset
    });

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      if (ref.current) {
        // eslint-disable-next-line react-hooks/exhaustive-deps
        observer.unobserve(ref.current);
      }
    }; // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return [isOnScreen, ref];
};

exports["default"] = useOnScreen;
