@folklore/hooks 0.0.58 → 0.0.60

package/dist/cjs.js

@@ -1766,41 +1766,47 @@ function useWindowSize() {
   return size;
 }
 
-const hasViewport = typeof window !== 'undefined' && (window.visualViewport || null) !== null;
-const useVisualViewportSize = () => {
+const useVisualViewport = () => {
   const {
     width: windowWidth,
     height: windowHeight
   } = useWindowSize();
   const [{
     width: viewportWidth,
-    height: viewportHeight
-  }, setViewportSize] = react.useState({
+    height: viewportHeight,
+    offsetTop = 0,
+    offsetLeft = 0,
+    pageLeft = 0,
+    pageTop = 0
+  }, setViewport] = react.useState({
     width: windowWidth,
     height: windowHeight
   });
-  const onResize = react.useCallback(e => {
-    const viewport = e.target;
-    setViewportSize({
-      width: viewport.width,
-      height: viewport.height
-    });
-  }, [setViewportSize]);
   react.useEffect(() => {
-    if (!hasViewport) {
+    if (!typeof window !== 'undefined' && (window.visualViewport || null) !== null) {
       return () => {};
     }
-    window.visualViewport.addEventListener('resize', onResize);
+    function updateViewport(e) {
+      setViewport(e.target);
+    }
+    setViewport(window.visualViewport);
+    window.visualViewport.addEventListener('resize', updateViewport);
+    window.visualViewport.addEventListener('scroll', updateViewport);
     return () => {
-      window.visualViewport.removeEventListener('resize', onResize);
+      window.visualViewport.removeEventListener('resize', updateViewport);
+      window.visualViewport.addEventListener('scroll', updateViewport);
     };
-  }, [onResize]);
+  }, [setViewport]);
   return {
     width: viewportWidth || windowWidth,
-    height: viewportHeight || windowHeight
+    height: viewportHeight || windowHeight,
+    offsetTop,
+    offsetLeft,
+    pageLeft,
+    pageTop
   };
 };
-var useVisualViewportSize$1 = useVisualViewportSize;
+var useVisualViewport$1 = useVisualViewport;
 
 const getWindowScroll = () => ({
   x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
@@ -1851,7 +1857,8 @@ exports.usePlayerCurrentTime = usePlayerCurrentTime;
 exports.useResizeObserver = useResizeObserver;
 exports.useVideoPlayer = useVideoPlayer;
 exports.useVimeoPlayer = useVimeoPlayer;
-exports.useVisualViewportSize = useVisualViewportSize$1;
+exports.useVisualViewport = useVisualViewport$1;
+exports.useVisualViewportSize = useVisualViewport$1;
 exports.useWindowEvent = useWindowEvent;
 exports.useWindowScroll = useWindowScroll;
 exports.useWindowSize = useWindowSize;

package/dist/es.js

@@ -1755,41 +1755,47 @@ function useWindowSize() {
   return size;
 }
 
-const hasViewport = typeof window !== 'undefined' && (window.visualViewport || null) !== null;
-const useVisualViewportSize = () => {
+const useVisualViewport = () => {
   const {
     width: windowWidth,
     height: windowHeight
   } = useWindowSize();
   const [{
     width: viewportWidth,
-    height: viewportHeight
-  }, setViewportSize] = useState({
+    height: viewportHeight,
+    offsetTop = 0,
+    offsetLeft = 0,
+    pageLeft = 0,
+    pageTop = 0
+  }, setViewport] = useState({
     width: windowWidth,
     height: windowHeight
   });
-  const onResize = useCallback(e => {
-    const viewport = e.target;
-    setViewportSize({
-      width: viewport.width,
-      height: viewport.height
-    });
-  }, [setViewportSize]);
   useEffect(() => {
-    if (!hasViewport) {
+    if (!typeof window !== 'undefined' && (window.visualViewport || null) !== null) {
       return () => {};
     }
-    window.visualViewport.addEventListener('resize', onResize);
+    function updateViewport(e) {
+      setViewport(e.target);
+    }
+    setViewport(window.visualViewport);
+    window.visualViewport.addEventListener('resize', updateViewport);
+    window.visualViewport.addEventListener('scroll', updateViewport);
     return () => {
-      window.visualViewport.removeEventListener('resize', onResize);
+      window.visualViewport.removeEventListener('resize', updateViewport);
+      window.visualViewport.addEventListener('scroll', updateViewport);
     };
-  }, [onResize]);
+  }, [setViewport]);
   return {
     width: viewportWidth || windowWidth,
-    height: viewportHeight || windowHeight
+    height: viewportHeight || windowHeight,
+    offsetTop,
+    offsetLeft,
+    pageLeft,
+    pageTop
   };
 };
-var useVisualViewportSize$1 = useVisualViewportSize;
+var useVisualViewport$1 = useVisualViewport;
 
 const getWindowScroll = () => ({
   x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
@@ -1825,4 +1831,4 @@ function useWindowScroll() {
   return scroll;
 }
 
-export { eventsManager$1 as documentEventsManager, getObserver, useCounter, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useIsVisible, useItemsPaginated, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useVideoPlayer, useVimeoPlayer, useVisualViewportSize$1 as useVisualViewportSize, useWindowEvent, useWindowScroll, useWindowSize, useYouTubePlayer, eventsManager as windowEventsManager };
+export { eventsManager$1 as documentEventsManager, getObserver, useCounter, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useIsVisible, useItemsPaginated, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useVideoPlayer, useVimeoPlayer, useVisualViewport$1 as useVisualViewport, useVisualViewport$1 as useVisualViewportSize, useWindowEvent, useWindowScroll, useWindowSize, useYouTubePlayer, eventsManager as windowEventsManager };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/hooks",
-    "version": "0.0.58",
+    "version": "0.0.60",
     "description": "React hooks",
     "keywords": [
         "javascript",
@@ -49,7 +49,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "eec9d8318fc17f4a40396ee05e15bb93a48c40cc",
+    "gitHead": "d94149439914382182ede5e695cc655feb4164e1",
     "dependencies": {
         "@folklore/events": "^0.0.5",
         "@folklore/services": "^0.1.40",