react-window-size-listener
Version:
Minimalistic React hook for listening to window resize events with built-in debouncing.
3 lines (2 loc) • 1.4 kB
JavaScript
import{useState as i,useCallback as e,useEffect as n}from"react";var t="undefined"!=typeof window;function o(){return t?{width:window.innerWidth,height:window.innerHeight}:{width:0,height:0}}function w(){return t?window.visualViewport?{width:window.visualViewport.width,height:window.visualViewport.height}:{width:window.innerWidth,height:window.innerHeight}:{width:0,height:0}}function r(w){void 0===w&&(w={});var r=w.debounceTime,d=void 0===r?100:r,u=i(o),v=u[0],s=u[1],a=e(function(){s(o())},[]);return n(function(){if(t){a();var i=null,e=function(){i&&window.clearTimeout(i),i=window.setTimeout(a,d)};return window.addEventListener("resize",e,{passive:!0}),function(){window.removeEventListener("resize",e),i&&window.clearTimeout(i)}}},[d,a]),v}function d(o){void 0===o&&(o={});var r=o.debounceTime,d=void 0===r?100:r,u=i(w),v=u[0],s=u[1],a=e(function(){s(w())},[]);return n(function(){if(t){a();var i=null,e=function(){i&&window.clearTimeout(i),i=window.setTimeout(a,d)},n=window.visualViewport||window;return n.addEventListener("resize",e,{passive:!0}),window.visualViewport&&window.visualViewport.addEventListener("scroll",e,{passive:!0}),function(){n.removeEventListener("resize",e),window.visualViewport&&window.visualViewport.removeEventListener("scroll",e),i&&window.clearTimeout(i)}}},[d,a]),v}export{d as useViewportSize,r as useWindowSize};
//# sourceMappingURL=index.module.js.map