@thecb/components 7.7.8-beta.8 → 7.7.8-beta.9

package/package.json

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

package/src/util/useCheckElementsInViewport.js

@@ -1,4 +1,4 @@
-import { useLayoutEffect } from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
 
 /*
   Hook that determines whether every element in an array of DOM selectors is fully present
@@ -24,10 +24,34 @@ import { useLayoutEffect } from "react";
 
 const useCheckElementsInViewport = (elements = []) => {
   let elementsVisible = true;
-  const viewportWidth =
-    window.innerWidth || document.documentElement.clientWidth;
-  const viewportHeight =
-    window.innerHeight || document.documentElement.clientHeight;
+  let timeoutID = false;
+  let delay = 250;
+  const [viewportWidth, setViewportWidth] = useState(
+    window.innerWidth || document.documentElement.clientWidth
+  );
+  const [viewportHeight, setViewportHeight] = useState(
+    window.innerHeight || document.documentElement.clientHeight
+  );
+  const updateViewportValues = () => {
+    clearTimeout(timeoutID);
+
+    timeoutID = setTimeout(() => {
+      setViewportWidth(
+        window.innerWidth || document.documentElement.clientWidth
+      );
+      setViewportHeight(
+        window.innerHeight || document.documentElement.clientHeight
+      );
+    }, delay);
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", updateViewportValues);
+
+    return () => {
+      clearTimeout(timeoutID);
+    };
+  }, []);
 
   useLayoutEffect(() => {
     elements.forEach(element => {