use-element-fit/dist/index.bundle.min.js

useElementFit is a React hook that allows you to measure and element's based on certain restraints, similar to object-fit in CSS.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t=t||self).useElementFit={},t.react)}(this,function(t,e){"use strict";var n;!function(t){t.CONTAIN="contain",t.COVER="cover",t.ALIGN_ONLY="align-only"}(n||(n={}));var r=n,i=function(){if("undefined"!=typeof Map)return Map;function t(t,e){var n=-1;return t.some(function(t,r){return t[0]===e&&(n=r,!0)}),n}return function(){function e(){this.__entries__=[]}return Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),e.prototype.get=function(e){var n=t(this.__entries__,e),r=this.__entries__[n];return r&&r[1]},e.prototype.set=function(e,n){var r=t(this.__entries__,e);~r?this.__entries__[r][1]=n:this.__entries__.push([e,n])},e.prototype.delete=function(e){var n=this.__entries__,r=t(n,e);~r&&n.splice(r,1)},e.prototype.has=function(e){return!!~t(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(t,e){void 0===e&&(e=null);for(var n=0,r=this.__entries__;n<r.length;n++){var i=r[n];t.call(e,i[1],i[0])}},e}()}(),o="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,s="undefined"!=typeof global&&global.Math===Math?global:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),a="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(s):function(t){return setTimeout(function(){return t(Date.now())},1e3/60)},c=2;var u=20,h=["top","right","bottom","left","width","height","size","weight"],f="undefined"!=typeof MutationObserver,d=function(){function t(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(t,e){var n=!1,r=!1,i=0;function o(){n&&(n=!1,t()),r&&u()}function s(){a(o)}function u(){var t=Date.now();if(n){if(t-i<c)return;r=!0}else n=!0,r=!1,setTimeout(s,e);i=t}return u}(this.refresh.bind(this),u)}return t.prototype.addObserver=function(t){~this.observers_.indexOf(t)||this.observers_.push(t),this.connected_||this.connect_()},t.prototype.removeObserver=function(t){var e=this.observers_,n=e.indexOf(t);~n&&e.splice(n,1),!e.length&&this.connected_&&this.disconnect_()},t.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},t.prototype.updateObservers_=function(){var t=this.observers_.filter(function(t){return t.gatherActive(),t.hasActive()});return t.forEach(function(t){return t.broadcastActive()}),t.length>0},t.prototype.connect_=function(){o&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),f?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},t.prototype.disconnect_=function(){o&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=!1,this.connected_=!1)},t.prototype.onTransitionEnd_=function(t){var e=t.propertyName,n=void 0===e?"":e;h.some(function(t){return!!~n.indexOf(t)})&&this.refresh()},t.getInstance=function(){return this.instance_||(this.instance_=new t),this.instance_},t.instance_=null,t}(),l=function(t,e){for(var n=0,r=Object.keys(e);n<r.length;n++){var i=r[n];Object.defineProperty(t,i,{value:e[i],enumerable:!1,writable:!1,configurable:!0})}return t},v=function(t){return t&&t.ownerDocument&&t.ownerDocument.defaultView||s},p=g(0,0,0,0);function _(t){return parseFloat(t)||0}function b(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];return e.reduce(function(e,n){return e+_(t["border-"+n+"-width"])},0)}function y(t){var e=t.clientWidth,n=t.clientHeight;if(!e&&!n)return p;var r=v(t).getComputedStyle(t),i=function(t){for(var e={},n=0,r=["top","right","bottom","left"];n<r.length;n++){var i=r[n],o=t["padding-"+i];e[i]=_(o)}return e}(r),o=i.left+i.right,s=i.top+i.bottom,a=_(r.width),c=_(r.height);if("border-box"===r.boxSizing&&(Math.round(a+o)!==e&&(a-=b(r,"left","right")+o),Math.round(c+s)!==n&&(c-=b(r,"top","bottom")+s)),!function(t){return t===v(t).document.documentElement}(t)){var u=Math.round(a+o)-e,h=Math.round(c+s)-n;1!==Math.abs(u)&&(a-=u),1!==Math.abs(h)&&(c-=h)}return g(i.left,i.top,a,c)}var m="undefined"!=typeof SVGGraphicsElement?function(t){return t instanceof v(t).SVGGraphicsElement}:function(t){return t instanceof v(t).SVGElement&&"function"==typeof t.getBBox};function w(t){return o?m(t)?function(t){var e=t.getBBox();return g(0,0,e.width,e.height)}(t):y(t):p}function g(t,e,n,r){return{x:t,y:e,width:n,height:r}}var O=function(){function t(t){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=g(0,0,0,0),this.target=t}return t.prototype.isActive=function(){var t=w(this.target);return this.contentRect_=t,t.width!==this.broadcastWidth||t.height!==this.broadcastHeight},t.prototype.broadcastRect=function(){var t=this.contentRect_;return this.broadcastWidth=t.width,this.broadcastHeight=t.height,t},t}(),E=function(){return function(t,e){var n,r,i,o,s,a,c,u=(r=(n=e).x,i=n.y,o=n.width,s=n.height,a="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,c=Object.create(a.prototype),l(c,{x:r,y:i,width:o,height:s,top:i,right:r+o,bottom:s+i,left:r}),c);l(this,{target:t,contentRect:u})}}(),M=function(){function t(t,e,n){if(this.activeObservations_=[],this.observations_=new i,"function"!=typeof t)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=t,this.controller_=e,this.callbackCtx_=n}return t.prototype.observe=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof v(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)||(e.set(t,new O(t)),this.controller_.addObserver(this),this.controller_.refresh())}},t.prototype.unobserve=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof v(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)&&(e.delete(t),e.size||this.controller_.removeObserver(this))}},t.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},t.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach(function(e){e.isActive()&&t.activeObservations_.push(e)})},t.prototype.broadcastActive=function(){if(this.hasActive()){var t=this.callbackCtx_,e=this.activeObservations_.map(function(t){return new E(t.target,t.broadcastRect())});this.callback_.call(t,e,t),this.clearActive()}},t.prototype.clearActive=function(){this.activeObservations_.splice(0)},t.prototype.hasActive=function(){return this.activeObservations_.length>0},t}(),A="undefined"!=typeof WeakMap?new WeakMap:new i,T=function(){return function t(e){if(!(this instanceof t))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=d.getInstance(),r=new M(e,n,this);A.set(this,r)}}();["observe","unobserve","disconnect"].forEach(function(t){T.prototype[t]=function(){var e;return(e=A.get(this))[t].apply(e,arguments)}});var x=void 0!==s.ResizeObserver?s.ResizeObserver:T;function R(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],r=!0,i=!1,o=void 0;try{for(var s,a=t[Symbol.iterator]();!(r=(s=a.next()).done)&&(n.push(s.value),!e||n.length!==e);r=!0);}catch(t){i=!0,o=t}finally{try{r||null==a.return||a.return()}finally{if(i)throw o}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}t.ScaleMode=r,t.useElementFit=(t,n,i=r.CONTAIN,o=.5,s=.5,a,c)=>{const[u,h,f]=function(){var t=e.useRef(),n=R(e.useState(1),2),r=n[0],i=n[1],o=R(e.useState(1),2),s=o[0],a=o[1];return e.useEffect(function(){var e=t.current,n=new x(function(t){if(Array.isArray(t)&&t.length){var e=t[0];i(e.contentRect.width),a(e.contentRect.height)}});return n.observe(e),function(){return n.unobserve(e)}},[]),[t,r,s]}(),[d,l]=e.useState(1),[v,p]=e.useState(1),[_,b]=e.useState(1),[y,m]=e.useState(1);return e.useEffect(()=>{const{width:e,height:u,x:d,y:v}=((t,e,n,i,o,s=.5,a=.5,c,u)=>{let h=0,f=0,d=0,l=0,v=1;switch(o!==r.CONTAIN&&o!==r.COVER||(d=n/t,l=i/e),o){case r.CONTAIN:v=d<l?d:l;break;case r.COVER:v=d>l?d:l;break;case r.ALIGN_ONLY:h=t,f=e}if(o===r.CONTAIN||o===r.COVER){if(c||u){let n=v,r=v;c&&(n=c/t),u&&(r=u/e);const i=n<r?n:r;v=Math.min(v,i)}h=t*v,f=e*v}return{width:Math.round(h),height:Math.round(f),x:Math.round((n-h)*s),y:Math.round((i-f)*a)}})(t,n,h,f,i,o,s,a,c);l(e),p(u),b(d),m(v)},[h,f,t,n,h,f,i,o,s,a,c]),{ref:u,width:d,height:v,x:_,y:y}},Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=index.bundle.min.js.map