@folklore/hooks 0.0.37 → 0.0.39

package/dist/cjs.js

@@ -1400,7 +1400,7 @@ function useYouTubePlayer(id) {
   const elementRef = react.useRef(null);
   const playerRef = react.useRef(null);
   const playerElementRef = react.useRef(elementRef.current);
-  if (elementRef.current !== null && playerElementRef.current !== null) {
+  if (elementRef.current !== null && playerElementRef.current === null) {
     playerElementRef.current = elementRef.current;
   }
   const elementHasChanged = elementRef.current !== playerElementRef.current;
@@ -1690,6 +1690,74 @@ function useVideoPlayer(params) {
   return player;
 }
 
+const getWindowSize = () => ({
+  width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
+  height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
+});
+let currentSize = getWindowSize();
+function useWindowSize() {
+  let {
+    onChange = null
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const [size, setSize] = react.useState(currentSize);
+  const updateSize = react.useCallback(() => {
+    const newSize = getWindowSize();
+    if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
+      currentSize = newSize;
+      setSize(newSize);
+      return newSize;
+    }
+    return null;
+  }, [setSize]);
+  const onResize = react.useCallback(() => {
+    const newSize = updateSize();
+    if (newSize !== null && onChange !== null) {
+      onChange(newSize);
+    }
+  }, [onChange]);
+  useWindowEvent('resize', onResize);
+  react.useEffect(() => {
+    onResize();
+  }, []);
+  return size;
+}
+
+const hasViewport = typeof window !== 'undefined' && (window.visualViewport || null) !== null;
+const useVisualViewportSize = () => {
+  const {
+    width: windowWidth,
+    height: windowHeight
+  } = useWindowSize();
+  const [{
+    width: viewportWidth,
+    height: viewportHeight
+  }, setViewportSize] = 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) {
+      return () => {};
+    }
+    window.visualViewport.addEventListener('resize', onResize);
+    return () => {
+      window.visualViewport.removeEventListener('resize', onResize);
+    };
+  }, [onResize]);
+  return {
+    width: viewportWidth || windowWidth,
+    height: viewportHeight || windowHeight
+  };
+};
+var useVisualViewportSize$1 = useVisualViewportSize;
+
 const getWindowScroll = () => ({
   x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
   y: typeof window !== 'undefined' ? window.scrollY || 0 : 0
@@ -1724,38 +1792,6 @@ function useWindowScroll() {
   return scroll;
 }
 
-const getWindowSize = () => ({
-  width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
-  height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
-});
-let currentSize = getWindowSize();
-function useWindowSize() {
-  let {
-    onChange = null
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const [size, setSize] = react.useState(currentSize);
-  const updateSize = react.useCallback(() => {
-    const newSize = getWindowSize();
-    if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
-      currentSize = newSize;
-      setSize(newSize);
-      return newSize;
-    }
-    return null;
-  }, [setSize]);
-  const onResize = react.useCallback(() => {
-    const newSize = updateSize();
-    if (newSize !== null && onChange !== null) {
-      onChange(newSize);
-    }
-  }, [onChange]);
-  useWindowEvent('resize', onResize);
-  react.useEffect(() => {
-    onResize();
-  }, []);
-  return size;
-}
-
 exports.documentEventsManager = eventsManager$1;
 exports.getObserver = getObserver;
 exports.useCounter = useCounter;
@@ -1771,6 +1807,7 @@ exports.usePlayerCurrentTime = usePlayerCurrentTime;
 exports.useResizeObserver = useResizeObserver;
 exports.useVideoPlayer = useVideoPlayer;
 exports.useVimeoPlayer = useVimeoPlayer;
+exports.useVisualViewportSize = useVisualViewportSize$1;
 exports.useWindowEvent = useWindowEvent;
 exports.useWindowScroll = useWindowScroll;
 exports.useWindowSize = useWindowSize;

package/dist/es.js

@@ -1389,7 +1389,7 @@ function useYouTubePlayer(id) {
   const elementRef = useRef(null);
   const playerRef = useRef(null);
   const playerElementRef = useRef(elementRef.current);
-  if (elementRef.current !== null && playerElementRef.current !== null) {
+  if (elementRef.current !== null && playerElementRef.current === null) {
     playerElementRef.current = elementRef.current;
   }
   const elementHasChanged = elementRef.current !== playerElementRef.current;
@@ -1679,6 +1679,74 @@ function useVideoPlayer(params) {
   return player;
 }
 
+const getWindowSize = () => ({
+  width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
+  height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
+});
+let currentSize = getWindowSize();
+function useWindowSize() {
+  let {
+    onChange = null
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const [size, setSize] = useState(currentSize);
+  const updateSize = useCallback(() => {
+    const newSize = getWindowSize();
+    if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
+      currentSize = newSize;
+      setSize(newSize);
+      return newSize;
+    }
+    return null;
+  }, [setSize]);
+  const onResize = useCallback(() => {
+    const newSize = updateSize();
+    if (newSize !== null && onChange !== null) {
+      onChange(newSize);
+    }
+  }, [onChange]);
+  useWindowEvent('resize', onResize);
+  useEffect(() => {
+    onResize();
+  }, []);
+  return size;
+}
+
+const hasViewport = typeof window !== 'undefined' && (window.visualViewport || null) !== null;
+const useVisualViewportSize = () => {
+  const {
+    width: windowWidth,
+    height: windowHeight
+  } = useWindowSize();
+  const [{
+    width: viewportWidth,
+    height: viewportHeight
+  }, setViewportSize] = useState({
+    width: windowWidth,
+    height: windowHeight
+  });
+  const onResize = useCallback(e => {
+    const viewport = e.target;
+    setViewportSize({
+      width: viewport.width,
+      height: viewport.height
+    });
+  }, [setViewportSize]);
+  useEffect(() => {
+    if (!hasViewport) {
+      return () => {};
+    }
+    window.visualViewport.addEventListener('resize', onResize);
+    return () => {
+      window.visualViewport.removeEventListener('resize', onResize);
+    };
+  }, [onResize]);
+  return {
+    width: viewportWidth || windowWidth,
+    height: viewportHeight || windowHeight
+  };
+};
+var useVisualViewportSize$1 = useVisualViewportSize;
+
 const getWindowScroll = () => ({
   x: typeof window !== 'undefined' ? window.scrollX || 0 : 0,
   y: typeof window !== 'undefined' ? window.scrollY || 0 : 0
@@ -1713,36 +1781,4 @@ function useWindowScroll() {
   return scroll;
 }
 
-const getWindowSize = () => ({
-  width: typeof window !== 'undefined' ? window.innerWidth || 0 : 0,
-  height: typeof window !== 'undefined' ? window.innerHeight || 0 : 0
-});
-let currentSize = getWindowSize();
-function useWindowSize() {
-  let {
-    onChange = null
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const [size, setSize] = useState(currentSize);
-  const updateSize = useCallback(() => {
-    const newSize = getWindowSize();
-    if (currentSize.width !== newSize.width || currentSize.height !== newSize.height) {
-      currentSize = newSize;
-      setSize(newSize);
-      return newSize;
-    }
-    return null;
-  }, [setSize]);
-  const onResize = useCallback(() => {
-    const newSize = updateSize();
-    if (newSize !== null && onChange !== null) {
-      onChange(newSize);
-    }
-  }, [onChange]);
-  useWindowEvent('resize', onResize);
-  useEffect(() => {
-    onResize();
-  }, []);
-  return size;
-}
-
-export { eventsManager$1 as documentEventsManager, getObserver, useCounter, useDailymotionPlayer, useDocumentEvent, useIntersectionObserver, useIsVisible, useItemsPaginated, useKeyboard, useNativeVideoPlayer, useObserver, usePlayerCurrentTime, useResizeObserver, useVideoPlayer, useVimeoPlayer, 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, useVisualViewportSize$1 as useVisualViewportSize, useWindowEvent, useWindowScroll, useWindowSize, useYouTubePlayer, eventsManager as windowEventsManager };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/hooks",
-    "version": "0.0.37",
+    "version": "0.0.39",
     "description": "React hooks",
     "keywords": [
         "javascript",
@@ -49,7 +49,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "74bc16333dab2c70f94aad9439d6daf55388e96e",
+    "gitHead": "397a98521a56c8c3c509fa5f75b9e0f59e0f8662",
     "dependencies": {
         "@folklore/events": "^0.0.5",
         "@folklore/services": "^0.1.38",