change ref to be created inside useVisibilitySensor hook

Author: sergio-toro

lib/use-visibility-sensor.js

@@ -98,71 +98,66 @@ function checkIsVisible(
   return isVisible;
 }
 
-export default function useVisibilitySensor(
-  nodeRef,
-  {
-    active = true,
-    onChange,
-    partialVisibility = false,
-    minTopValue = 0,
-    scrollCheck = false,
-    scrollDelay = 250,
-    scrollThrottle = -1,
-    resizeCheck = false,
-    resizeDelay = 250,
-    resizeThrottle = -1,
-    intervalCheck = true,
-    intervalDelay = 100,
-    delayedCall = false,
-    offset = {},
-    containment = null
-  }
-) {
+export default function useVisibilitySensor({
+  active = true,
+  onChange,
+  partialVisibility = false,
+  minTopValue = 0,
+  scrollCheck = false,
+  scrollDelay = 250,
+  scrollThrottle = -1,
+  resizeCheck = false,
+  resizeDelay = 250,
+  resizeThrottle = -1,
+  intervalCheck = true,
+  intervalDelay = 100,
+  delayedCall = false,
+  offset = {},
+  containment = null
+}) {
+  const nodeRef = useRef();
   const debounceCheckRef = useRef();
   const intervalRef = useRef();
-  const [isVisible, setIsVisible] = useState(false);
+  const [isVisible, setIsVisible] = useState(null);
   const [visibilityRect, setVisibilityRect] = useState({});
 
   const getContainer = useCallback(() => containment || window, [containment]);
 
   // Check if the element is within the visible viewport
-  const visibilityCheck = useCallback(
-    () => {
-      const el = nodeRef && nodeRef.current;
-      // if the component has rendered to null, dont update visibility
-      if (!el) {
-        return;
-      }
+  const visibilityCheck = useCallback(() => {
+    const el = nodeRef && nodeRef.current;
+    // if the component has rendered to null, dont update visibility
+    if (!el) {
+      return;
+    }
 
-      const rect = normalizeRect(roundRectDown(el.getBoundingClientRect()));
-      const containmentRect = getContainmentRect(containment, offset);
-      const nextVisibilityRect = getVisibilityRect(rect, containmentRect);
-      const nextIsVisible = checkIsVisible(
-        rect,
-        containmentRect,
-        nextVisibilityRect,
-        partialVisibility,
-        minTopValue
-      );
-
-      // notify the parent when the value changes
-      if (isVisible !== nextIsVisible) {
-        setIsVisible(nextIsVisible);
-        setVisibilityRect(nextVisibilityRect);
-        if (onChange) onChange(nextIsVisible);
-      }
-    },
-    [
-      isVisible,
-      offset,
-      containment,
+    const rect = normalizeRect(roundRectDown(el.getBoundingClientRect()));
+    const containmentRect = getContainmentRect(containment, offset);
+    const nextVisibilityRect = getVisibilityRect(rect, containmentRect);
+    const nextIsVisible = checkIsVisible(
+      rect,
+      containmentRect,
+      nextVisibilityRect,
       partialVisibility,
-      minTopValue,
-      onChange,
-      setIsVisible,
-      setVisibilityRect
-    ]
-  );
+      minTopValue
+    );
+
+    // notify the parent when the value changes
+    if (isVisible !== nextIsVisible) {
+      setIsVisible(nextIsVisible);
+      setVisibilityRect(nextVisibilityRect);
+      if (onChange) onChange(nextIsVisible);
+    }
+  }, [
+    isVisible,
+    offset,
+    containment,
+    partialVisibility,
+    minTopValue,
+    onChange,
+    setIsVisible,
+    setVisibilityRect
+  ]);
 
   const addEventListener = useCallback(
     (target, event, delay, throttle) => {
@@ -209,77 +204,69 @@ export default function useVisibilitySensor(
     [visibilityCheck]
   );
 
-  useEffect(
-    () => {
-      function watch() {
-        if (debounceCheckRef.current || intervalRef.current) {
-          return;
-        }
-
-        if (intervalCheck) {
-          intervalRef.current = setInterval(visibilityCheck, intervalDelay);
-        }
-
-        if (scrollCheck) {
-          addEventListener(
-            getContainer(),
-            "scroll",
-            scrollDelay,
-            scrollThrottle
-          );
-        }
+  useEffect(() => {
+    function watch() {
+      if (debounceCheckRef.current || intervalRef.current) {
+        return;
+      }
 
-        if (resizeCheck) {
-          addEventListener(window, "resize", resizeDelay, resizeThrottle);
-        }
+      if (intervalCheck) {
+        intervalRef.current = setInterval(visibilityCheck, intervalDelay);
+      }
 
-        // if dont need delayed call, check on load ( before the first interval fires )
-        !delayedCall && visibilityCheck();
+      if (scrollCheck) {
+        addEventListener(getContainer(), "scroll", scrollDelay, scrollThrottle);
       }
 
-      if (active) {
-        watch();
+      if (resizeCheck) {
+        addEventListener(window, "resize", resizeDelay, resizeThrottle);
       }
 
-      // stop any listeners and intervals on props change and re-registers
-      return () => {
-        if (debounceCheckRef.current) {
-          const debounceCheck = debounceCheckRef.current;
-          // clean up event listeners and their debounce callers
-          for (let debounceEvent in debounceCheck) {
-            if (debounceCheck.hasOwnProperty(debounceEvent)) {
-              const debounceInfo = debounceCheck[debounceEvent];
-
-              clearTimeout(debounceInfo.getLastTimeout());
-              debounceInfo.target.removeEventListener(
-                debounceEvent,
-                debounceInfo.fn
-              );
-
-              debounceCheck[debounceEvent] = null;
-            }
-          }
-        }
-        debounceCheckRef.current = null;
+      // if dont need delayed call, check on load ( before the first interval fires )
+      !delayedCall && visibilityCheck();
+    }
+
+    if (active) {
+      watch();
+    }
 
-        if (intervalRef.current) {
-          intervalRef.current = clearInterval(intervalRef.current);
+    // stop any listeners and intervals on props change and re-registers
+    return () => {
+      if (debounceCheckRef.current) {
+        const debounceCheck = debounceCheckRef.current;
+        // clean up event listeners and their debounce callers
+        for (let debounceEvent in debounceCheck) {
+          if (debounceCheck.hasOwnProperty(debounceEvent)) {
+            const debounceInfo = debounceCheck[debounceEvent];
+
+            clearTimeout(debounceInfo.getLastTimeout());
+            debounceInfo.target.removeEventListener(
+              debounceEvent,
+              debounceInfo.fn
+            );
+
+            debounceCheck[debounceEvent] = null;
+          }
         }
-      };
-    },
-    [
-      active,
-      scrollCheck,
-      scrollDelay,
-      scrollThrottle,
-      resizeCheck,
-      resizeDelay,
-      resizeThrottle,
-      intervalCheck,
-      intervalDelay,
-      visibilityCheck
-    ]
-  );
+      }
+      debounceCheckRef.current = null;
 
-  return { isVisible, visibilityRect };
+      if (intervalRef.current) {
+        intervalRef.current = clearInterval(intervalRef.current);
+      }
+    };
+  }, [
+    active,
+    scrollCheck,
+    scrollDelay,
+    scrollThrottle,
+    resizeCheck,
+    resizeDelay,
+    resizeThrottle,
+    intervalCheck,
+    intervalDelay,
+    visibilityCheck
+  ]);
+
+  return { nodeRef, isVisible, visibilityRect };
 }

visibility-sensor.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React, { useRef } from "react";
+import React from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 import useVisibilitySensor from "./lib/use-visibility-sensor";
@@ -25,8 +25,7 @@ export default function VisibilitySensor({
   offset,
   containment
 }) {
-  const nodeRef = useRef();
-  const { isVisible, visibilityRect } = useVisibilitySensor(nodeRef, {
+  const { nodeRef, isVisible, visibilityRect } = useVisibilitySensor({
     active,
     onChange,
     partialVisibility,