@thecb/components 7.7.8-beta.2 → 7.7.8-beta.4

package/package.json

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

package/src/util/useCheckElementsInViewport.js

@@ -4,23 +4,28 @@ 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>) => Boolean;
+  (elements: Array<String>, Function) => undefined;
 
   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.
 
-  A combination string of multiple selectors can also be provided, e.g.:
+  A combination string of multiple selectors can also be provided as an item in the array, e.g.:
   ".alert-info, .alert-warning, .alert-error"
 
   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 = []) => {
+const useCheckElementsInViewport = (elements = [], handler) => {
   const [elementsVisible, setElementsVisible] = useState(false);
   const viewportWidth =
     window.innerWidth || document.documentElement.clientWidth;
@@ -41,9 +46,9 @@ const useCheckElementsInViewport = (elements = []) => {
         setElementsVisible(true);
       }
     });
-  }, [elements]);
+  }, [elements, viewportWidth, viewportHeight]);
 
-  return elementsVisible;
+  handler(elementsVisible);
 };
 
 export default useCheckElementsInViewport;