@thecb/components 7.7.8-beta.3 → 7.7.8-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.7.8-beta.3",
+  "version": "7.7.8-beta.5",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/util/useCheckElementsInViewport.js

@@ -4,14 +4,11 @@ import { useEffect, useState } from "react";
   Hook that determines whether every element in an array of DOM selectors is fully present
   within the user's current viewport.
 
-  (elements: Array<String>, Function) => undefined;
+  (elements: Array<String>) => Boolean;
 
   Takes an array of strings that correspond to DOM selectors. Examples:
   "#submit-button", ".module-small", "h2.alert-title"
 
-  Also takes a handler function (such as a useState updater) to receive the Boolean
-  that the hook generates
-
   The document query function will return the *first* element in the document that matches
   the string given.
 
@@ -21,11 +18,9 @@ import { useEffect, useState } from "react";
   This will return the first element that matches *any* of the provided selectors
 
   If every element in the array is fully within the viewport, function returns true
-
-  Calls the provided handler function with the Boolean result
 */
 
-const useCheckElementsInViewport = (elements = [], handler) => {
+const useCheckElementsInViewport = (elements = []) => {
   const [elementsVisible, setElementsVisible] = useState(false);
   const viewportWidth =
     window.innerWidth || document.documentElement.clientWidth;
@@ -46,9 +41,9 @@ const useCheckElementsInViewport = (elements = [], handler) => {
         setElementsVisible(true);
       }
     });
-  }, [elements]);
+  }, [elements, viewportWidth, viewportHeight]);
 
-  handler(elementsVisible);
+  return elementsVisible;
 };
 
 export default useCheckElementsInViewport;