react-resize-aware
Version:
A React hook that makes it possible to listen to element resize events.
3 lines (2 loc) • 1.18 kB
JavaScript
import*as e from"react";import{jsx as t}from"react/jsx-runtime";var n={display:"block",opacity:0,position:"absolute",top:0,left:0,height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:-1,maxHeight:"inherit",maxWidth:"inherit"},r=function(r){var i=r.onResize,o=e.useRef();return function(t,n){var r=function(){return t.current&&t.current.contentDocument&&t.current.contentDocument.defaultView};function i(){n();var e=r();e&&e.addEventListener("resize",n)}e.useEffect(function(){return r()?i():t.current&&"addEventListener"in t.current&&t.current.addEventListener("load",i),function(){var e=r();null!=e&&e&&"function"==typeof e.removeEventListener&&e.removeEventListener("resize",n)}},[])}(o,function(){return i(o)}),/*#__PURE__*/t("iframe",{style:n,src:"about:blank",ref:o,"aria-hidden":!0,tabIndex:-1,frameBorder:0})},i=function(e){return null!=e?{width:e.offsetWidth,height:e.offsetHeight}:null};function o(n){void 0===n&&(n=i);var o=e.useState(n(null)),u=o[0],a=o[1],c=e.useCallback(function(e){return a(n(e.current))},[n]);return[e.useMemo(function(){/*#__PURE__*/return t(r,{onResize:c})},[c]),u]}export{o as default};
//# sourceMappingURL=index.modern.js.map