use-element-fit - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

dist/index.js

@@ -11,9 +11,9 @@ (function (global, factory) {
   (function (ScaleMode) {
-      ScaleMode[ScaleMode["CONTAIN"] = 0] = "CONTAIN";
-      ScaleMode[ScaleMode["COVER"] = 1] = "COVER";
-      ScaleMode[ScaleMode["ALIGN_ONLY"] = 2] = "ALIGN_ONLY";
+      ScaleMode["CONTAIN"] = "contain";
+      ScaleMode["COVER"] = "cover";
+      ScaleMode["ALIGN_ONLY"] = "align-only";
   })(ScaleMode || (ScaleMode = {}));
   var ScaleMode$1 = ScaleMode;
 
-  const resize = (elementWidth, elementHeight, containerHeight, containerWidth, scaleMode, alignmentX = 0.5, alignmentY = 0.5, maxWidth, maxHeight) => {
+  const resize = (elementWidth, elementHeight, containerWidth, containerHeight, scaleMode, alignmentX = 0.5, alignmentY = 0.5, maxWidth, maxHeight) => {
       let targetWidth = 0;
@@ -28,3 +28,2 @@ let targetHeight = 0;
           boundRatioY = containerHeight / elementHeight;
-          scale = 1;
       }
@@ -77,15 +76,19 @@ // get scale for bounds container
           const { width: newWidth, height: newHeight, x, y } = resize(width, height, containerWidth, containerHeight, scaleMode, alignmentX, alignmentY, maxWidth, maxHeight);
-          if (newWidth !== fitWidth) {
-              setFitWidth(newWidth);
-          }
-          if (fitHeight !== newHeight) {
-              setFitHeight(newHeight);
-          }
-          if (x !== fitX) {
-              setFitX(x);
-          }
-          if (y !== fitY) {
-              setFitY(y);
-          }
-      }, [containerWidth, containerHeight]);
+          setFitWidth(newWidth);
+          setFitHeight(newHeight);
+          setFitX(x);
+          setFitY(y);
+      }, [
+          containerWidth,
+          containerHeight,
+          width,
+          height,
+          containerWidth,
+          containerHeight,
+          scaleMode,
+          alignmentX,
+          alignmentY,
+          maxWidth,
+          maxHeight,
+      ]);
       return {
@@ -92,0 +95,0 @@ ref,

dist/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sources":["../src/ScaleMode.ts","../src/useElementFit.ts"],"sourcesContent":["enum ScaleMode {\n  CONTAIN,\n  COVER,\n  ALIGN_ONLY,\n}\n\nexport default ScaleMode;\n","import { RefObject, useEffect, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport ScaleMode from './ScaleMode';\n\nconst resize = (\n  elementWidth: number,\n  elementHeight: number,\n  containerHeight: number,\n  containerWidth: number,\n  scaleMode: ScaleMode,\n  alignmentX: number = 0.5,\n  alignmentY: number = 0.5,\n  maxWidth?: number | undefined,\n  maxHeight?: number | undefined,\n) => {\n  let targetWidth: number = 0;\n  let targetHeight: number = 0;\n  let boundRatioX: number = 0;\n  let boundRatioY: number = 0;\n  let scale = 1;\n\n  // get needed scale to fit in bounds with cover\n  if (scaleMode === ScaleMode.CONTAIN || scaleMode === ScaleMode.COVER) {\n    boundRatioX = containerWidth / elementWidth;\n    boundRatioY = containerHeight / elementHeight;\n    scale = 1;\n  }\n\n  // get scale for bounds container\n  switch (scaleMode) {\n    case ScaleMode.CONTAIN:\n      scale = boundRatioX < boundRatioY ? boundRatioX : boundRatioY;\n      break;\n    case ScaleMode.COVER:\n      scale = boundRatioX > boundRatioY ? boundRatioX : boundRatioY;\n      break;\n    case ScaleMode.ALIGN_ONLY:\n      targetWidth = elementWidth;\n      targetHeight = elementHeight;\n      break;\n  }\n\n  if (scaleMode === ScaleMode.CONTAIN || scaleMode === ScaleMode.COVER) {\n    // get needed scale to fit in max with contain\n    if (maxWidth || maxHeight) {\n      let scaleMaxRatioX = scale;\n      let scaleMaxRatioY = scale;\n\n      if (maxWidth) {\n        scaleMaxRatioX = maxWidth / elementWidth;\n      }\n\n      if (maxHeight) {\n        scaleMaxRatioY = maxHeight / elementHeight;\n      }\n\n      const scaleMax = scaleMaxRatioX < scaleMaxRatioY ? scaleMaxRatioX : scaleMaxRatioY;\n\n      scale = Math.min(scale, scaleMax);\n    }\n\n    // do the actual scale\n    targetWidth = elementWidth * scale;\n    targetHeight = elementHeight * scale;\n  }\n\n  return {\n    width: Math.round(targetWidth),\n    height: Math.round(targetHeight),\n    x: Math.round((containerWidth - targetWidth) * alignmentX),\n    y: Math.round((containerHeight - targetHeight) * alignmentY),\n  };\n};\n\nconst useElementFit = (\n  width: number,\n  height: number,\n  scaleMode: ScaleMode = ScaleMode.CONTAIN,\n  alignmentX: number = 0.5,\n  alignmentY: number = 0.5,\n  maxWidth?: number | undefined,\n  maxHeight?: number | undefined,\n): {\n  ref: React.RefObject<HTMLElement>;\n  width: number;\n  x: number;\n  y: number;\n  height: number;\n} => {\n  const [ref, containerWidth, containerHeight] = useResizeObserver();\n\n  const [fitWidth, setFitWidth] = useState(1);\n  const [fitHeight, setFitHeight] = useState(1);\n\n  const [fitX, setFitX] = useState(1);\n  const [fitY, setFitY] = useState(1);\n\n  useEffect(() => {\n    const { width: newWidth, height: newHeight, x, y } = resize(\n      width,\n      height,\n      containerWidth,\n      containerHeight,\n      scaleMode,\n      alignmentX,\n      alignmentY,\n      maxWidth,\n      maxHeight,\n    );\n\n    if (newWidth !== fitWidth) {\n      setFitWidth(newWidth);\n    }\n\n    if (fitHeight !== newHeight) {\n      setFitHeight(newHeight);\n    }\n\n    if (x !== fitX) {\n      setFitX(x);\n    }\n\n    if (y !== fitY) {\n      setFitY(y);\n    }\n  }, [containerWidth, containerHeight]);\n\n  return {\n    ref,\n    width: fitWidth,\n    height: fitHeight,\n    x: fitX,\n    y: fitY,\n  };\n};\n\nexport default useElementFit;\n"],"names":["ScaleMode","useState","useEffect"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/ScaleMode.ts","../src/useElementFit.ts"],"sourcesContent":["enum ScaleMode {\n  CONTAIN = 'contain',\n  COVER = 'cover',\n  ALIGN_ONLY = 'align-only',\n}\n\nexport default ScaleMode;\n","import { RefObject, useEffect, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport ScaleMode from './ScaleMode';\n\nconst resize = (\n  elementWidth: number,\n  elementHeight: number,\n  containerWidth: number,\n  containerHeight: number,\n  scaleMode: ScaleMode,\n  alignmentX: number = 0.5,\n  alignmentY: number = 0.5,\n  maxWidth?: number | undefined,\n  maxHeight?: number | undefined,\n) => {\n  let targetWidth: number = 0;\n  let targetHeight: number = 0;\n  let boundRatioX: number = 0;\n  let boundRatioY: number = 0;\n  let scale = 1;\n\n  // get needed scale to fit in bounds with cover\n  if (scaleMode === ScaleMode.CONTAIN || scaleMode === ScaleMode.COVER) {\n    boundRatioX = containerWidth / elementWidth;\n    boundRatioY = containerHeight / elementHeight;\n  }\n\n  // get scale for bounds container\n  switch (scaleMode) {\n    case ScaleMode.CONTAIN:\n      scale = boundRatioX < boundRatioY ? boundRatioX : boundRatioY;\n      break;\n    case ScaleMode.COVER:\n      scale = boundRatioX > boundRatioY ? boundRatioX : boundRatioY;\n      break;\n    case ScaleMode.ALIGN_ONLY:\n      targetWidth = elementWidth;\n      targetHeight = elementHeight;\n      break;\n  }\n\n  if (scaleMode === ScaleMode.CONTAIN || scaleMode === ScaleMode.COVER) {\n    // get needed scale to fit in max with contain\n    if (maxWidth || maxHeight) {\n      let scaleMaxRatioX = scale;\n      let scaleMaxRatioY = scale;\n\n      if (maxWidth) {\n        scaleMaxRatioX = maxWidth / elementWidth;\n      }\n\n      if (maxHeight) {\n        scaleMaxRatioY = maxHeight / elementHeight;\n      }\n\n      const scaleMax = scaleMaxRatioX < scaleMaxRatioY ? scaleMaxRatioX : scaleMaxRatioY;\n\n      scale = Math.min(scale, scaleMax);\n    }\n\n    // do the actual scale\n    targetWidth = elementWidth * scale;\n    targetHeight = elementHeight * scale;\n  }\n\n  return {\n    width: Math.round(targetWidth),\n    height: Math.round(targetHeight),\n    x: Math.round((containerWidth - targetWidth) * alignmentX),\n    y: Math.round((containerHeight - targetHeight) * alignmentY),\n  };\n};\n\nconst useElementFit = (\n  width: number,\n  height: number,\n  scaleMode: ScaleMode = ScaleMode.CONTAIN,\n  alignmentX: number = 0.5,\n  alignmentY: number = 0.5,\n  maxWidth?: number | undefined,\n  maxHeight?: number | undefined,\n): {\n  ref: React.RefObject<HTMLElement>;\n  width: number;\n  x: number;\n  y: number;\n  height: number;\n} => {\n  const [ref, containerWidth, containerHeight] = useResizeObserver();\n\n  const [fitWidth, setFitWidth] = useState(1);\n  const [fitHeight, setFitHeight] = useState(1);\n\n  const [fitX, setFitX] = useState(1);\n  const [fitY, setFitY] = useState(1);\n\n  useEffect(() => {\n    const { width: newWidth, height: newHeight, x, y } = resize(\n      width,\n      height,\n      containerWidth,\n      containerHeight,\n      scaleMode,\n      alignmentX,\n      alignmentY,\n      maxWidth,\n      maxHeight,\n    );\n\n    setFitWidth(newWidth);\n    setFitHeight(newHeight);\n    setFitX(x);\n    setFitY(y);\n  }, [\n    containerWidth,\n    containerHeight,\n    width,\n    height,\n    containerWidth,\n    containerHeight,\n    scaleMode,\n    alignmentX,\n    alignmentY,\n    maxWidth,\n    maxHeight,\n  ]);\n\n  return {\n    ref,\n    width: fitWidth,\n    height: fitHeight,\n    x: fitX,\n    y: fitY,\n  };\n};\n\nexport default useElementFit;\n"],"names":["ScaleMode","useState","useEffect"],"mappings":"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"}

dist/index.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("use-resize-observer")):"function"==typeof define&&define.amd?define(["exports","react","use-resize-observer"],t):t((e=e||self).useElementFit={},e.react,e.useResizeObserver)}(this,function(e,t,r){"use strict";var s;r=r&&r.hasOwnProperty("default")?r.default:r,function(e){e[e.CONTAIN=0]="CONTAIN",e[e.COVER=1]="COVER",e[e.ALIGN_ONLY=2]="ALIGN_ONLY"}(s||(s={}));var u=s;e.ScaleMode=u,e.useElementFit=(e,s,i=u.CONTAIN,n=.5,a=.5,o,f)=>{const[c,d,N]=r(),[h,O]=t.useState(1),[l,C]=t.useState(1),[A,I]=t.useState(1),[p,y]=t.useState(1);return t.useEffect(()=>{const{width:t,height:r,x:c,y:E}=((e,t,r,s,i,n=.5,a=.5,o,f)=>{let c=0,d=0,N=0,h=0,O=1;switch(i!==u.CONTAIN&&i!==u.COVER||(N=s/e,h=r/t,O=1),i){case u.CONTAIN:O=N<h?N:h;break;case u.COVER:O=N>h?N:h;break;case u.ALIGN_ONLY:c=e,d=t}if(i===u.CONTAIN||i===u.COVER){if(o||f){let r=O,s=O;o&&(r=o/e),f&&(s=f/t);const u=r<s?r:s;O=Math.min(O,u)}c=e*O,d=t*O}return{width:Math.round(c),height:Math.round(d),x:Math.round((s-c)*n),y:Math.round((r-d)*a)}})(e,s,d,N,i,n,a,o,f);t!==h&&O(t),l!==r&&C(r),c!==A&&I(c),E!==p&&y(E)},[d,N]),{ref:c,width:h,height:l,x:A,y:p}},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("use-resize-observer")):"function"==typeof define&&define.amd?define(["exports","react","use-resize-observer"],t):t((e=e||self).useElementFit={},e.react,e.useResizeObserver)}(this,function(e,t,r){"use strict";var s;r=r&&r.hasOwnProperty("default")?r.default:r,function(e){e.CONTAIN="contain",e.COVER="cover",e.ALIGN_ONLY="align-only"}(s||(s={}));var n=s;e.ScaleMode=n,e.useElementFit=(e,s,i=n.CONTAIN,u=.5,o=.5,a,c)=>{const[f,d,h]=r(),[N,O]=t.useState(1),[l,y]=t.useState(1),[C,p]=t.useState(1),[b,v]=t.useState(1);return t.useEffect(()=>{const{width:t,height:r,x:f,y:N}=((e,t,r,s,i,u=.5,o=.5,a,c)=>{let f=0,d=0,h=0,N=0,O=1;switch(i!==n.CONTAIN&&i!==n.COVER||(h=r/e,N=s/t),i){case n.CONTAIN:O=h<N?h:N;break;case n.COVER:O=h>N?h:N;break;case n.ALIGN_ONLY:f=e,d=t}if(i===n.CONTAIN||i===n.COVER){if(a||c){let r=O,s=O;a&&(r=a/e),c&&(s=c/t);const n=r<s?r:s;O=Math.min(O,n)}f=e*O,d=t*O}return{width:Math.round(f),height:Math.round(d),x:Math.round((r-f)*u),y:Math.round((s-d)*o)}})(e,s,d,h,i,u,o,a,c);O(t),y(r),p(f),v(N)},[d,h,e,s,d,h,i,u,o,a,c]),{ref:f,width:N,height:l,x:C,y:b}},Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=index.min.js.map

dist/index.min.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.min.js","sources":["../src/ScaleMode.ts","../src/useElementFit.ts"],"sourcesContent":["enum ScaleMode {\n  CONTAIN,\n  COVER,\n  ALIGN_ONLY,\n}\n\nexport default ScaleMode;\n","import { RefObject, useEffect, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport ScaleMode from './ScaleMode';\n\nconst resize = (\n  elementWidth: number,\n  elementHeight: number,\n  containerHeight: number,\n  containerWidth: number,\n  scaleMode: ScaleMode,\n  alignmentX: number = 0.5,\n  alignmentY: number = 0.5,\n  maxWidth?: number | undefined,\n  maxHeight?: number | undefined,\n) => {\n  let targetWidth: number = 0;\n  let targetHeight: number = 0;\n  let boundRatioX: number = 0;\n  let boundRatioY: number = 0;\n  let scale = 1;\n\n  // get needed scale to fit in bounds with cover\n  if (scaleMode === ScaleMode.CONTAIN || scaleMode === ScaleMode.COVER) {\n    boundRatioX = containerWidth / elementWidth;\n    boundRatioY = containerHeight / elementHeight;\n    scale = 1;\n  }\n\n  // get scale for bounds container\n  switch (scaleMode) {\n    case ScaleMode.CONTAIN:\n      scale = boundRatioX < boundRatioY ? boundRatioX : boundRatioY;\n      break;\n    case ScaleMode.COVER:\n      scale = boundRatioX > boundRatioY ? boundRatioX : boundRatioY;\n      break;\n    case ScaleMode.ALIGN_ONLY:\n      targetWidth = elementWidth;\n      targetHeight = elementHeight;\n      break;\n  }\n\n  if (scaleMode === ScaleMode.CONTAIN || scaleMode === ScaleMode.COVER) {\n    // get needed scale to fit in max with contain\n    if (maxWidth || maxHeight) {\n      let scaleMaxRatioX = scale;\n      let scaleMaxRatioY = scale;\n\n      if (maxWidth) {\n        scaleMaxRatioX = maxWidth / elementWidth;\n      }\n\n      if (maxHeight) {\n        scaleMaxRatioY = maxHeight / elementHeight;\n      }\n\n      const scaleMax = scaleMaxRatioX < scaleMaxRatioY ? scaleMaxRatioX : scaleMaxRatioY;\n\n      scale = Math.min(scale, scaleMax);\n    }\n\n    // do the actual scale\n    targetWidth = elementWidth * scale;\n    targetHeight = elementHeight * scale;\n  }\n\n  return {\n    width: Math.round(targetWidth),\n    height: Math.round(targetHeight),\n    x: Math.round((containerWidth - targetWidth) * alignmentX),\n    y: Math.round((containerHeight - targetHeight) * alignmentY),\n  };\n};\n\nconst useElementFit = (\n  width: number,\n  height: number,\n  scaleMode: ScaleMode = ScaleMode.CONTAIN,\n  alignmentX: number = 0.5,\n  alignmentY: number = 0.5,\n  maxWidth?: number | undefined,\n  maxHeight?: number | undefined,\n): {\n  ref: React.RefObject<HTMLElement>;\n  width: number;\n  x: number;\n  y: number;\n  height: number;\n} => {\n  const [ref, containerWidth, containerHeight] = useResizeObserver();\n\n  const [fitWidth, setFitWidth] = useState(1);\n  const [fitHeight, setFitHeight] = useState(1);\n\n  const [fitX, setFitX] = useState(1);\n  const [fitY, setFitY] = useState(1);\n\n  useEffect(() => {\n    const { width: newWidth, height: newHeight, x, y } = resize(\n      width,\n      height,\n      containerWidth,\n      containerHeight,\n      scaleMode,\n      alignmentX,\n      alignmentY,\n      maxWidth,\n      maxHeight,\n    );\n\n    if (newWidth !== fitWidth) {\n      setFitWidth(newWidth);\n    }\n\n    if (fitHeight !== newHeight) {\n      setFitHeight(newHeight);\n    }\n\n    if (x !== fitX) {\n      setFitX(x);\n    }\n\n    if (y !== fitY) {\n      setFitY(y);\n    }\n  }, [containerWidth, containerHeight]);\n\n  return {\n    ref,\n    width: fitWidth,\n    height: fitHeight,\n    x: fitX,\n    y: fitY,\n  };\n};\n\nexport default useElementFit;\n"],"names":["ScaleMode","width","height","scaleMode","CONTAIN","alignmentX","alignmentY","maxWidth","maxHeight","ref","containerWidth","containerHeight","useResizeObserver","fitWidth","setFitWidth","useState","fitHeight","setFitHeight","fitX","setFitX","fitY","setFitY","useEffect","newWidth","newHeight","x","y","elementWidth","elementHeight","targetWidth","targetHeight","boundRatioX","boundRatioY","scale","COVER","ALIGN_ONLY","scaleMaxRatioX","scaleMaxRatioY","scaleMax","Math","min","round","resize"],"mappings":"wTAAA,IAAKA,+CAAL,SAAKA,GACHA,yBACAA,qBACAA,+BAHF,CAAKA,IAAAA,aAMUA,gCCoEO,CACpBC,EACAC,EACAC,EAAuBH,EAAUI,QACjCC,EAAqB,GACrBC,EAAqB,GACrBC,EACAC,KAQA,MAAOC,EAAKC,EAAgBC,GAAmBC,KAExCC,EAAUC,GAAeC,WAAS,IAClCC,EAAWC,GAAgBF,WAAS,IAEpCG,EAAMC,GAAWJ,WAAS,IAC1BK,EAAMC,GAAWN,WAAS,GAgCjC,OA9BAO,YAAU,KACR,MAAQrB,MAAOsB,EAAUrB,OAAQsB,EAASC,EAAEA,EAACC,EAAEA,GA9FpC,EACbC,EACAC,EACAjB,EACAD,EACAP,EACAE,EAAqB,GACrBC,EAAqB,GACrBC,EACAC,KAEA,IAAIqB,EAAsB,EACtBC,EAAuB,EACvBC,EAAsB,EACtBC,EAAsB,EACtBC,EAAQ,EAUZ,OAPI9B,IAAcH,EAAUI,SAAWD,IAAcH,EAAUkC,QAC7DH,EAAcrB,EAAiBiB,EAC/BK,EAAcrB,EAAkBiB,EAChCK,EAAQ,GAIF9B,GACN,KAAKH,EAAUI,QACb6B,EAAQF,EAAcC,EAAcD,EAAcC,EAClD,MACF,KAAKhC,EAAUkC,MACbD,EAAQF,EAAcC,EAAcD,EAAcC,EAClD,MACF,KAAKhC,EAAUmC,WACbN,EAAcF,EACdG,EAAeF,EAInB,GAAIzB,IAAcH,EAAUI,SAAWD,IAAcH,EAAUkC,MAAO,CAEpE,GAAI3B,GAAYC,EAAW,CACzB,IAAI4B,EAAiBH,EACjBI,EAAiBJ,EAEjB1B,IACF6B,EAAiB7B,EAAWoB,GAG1BnB,IACF6B,EAAiB7B,EAAYoB,GAG/B,MAAMU,EAAWF,EAAiBC,EAAiBD,EAAiBC,EAEpEJ,EAAQM,KAAKC,IAAIP,EAAOK,GAI1BT,EAAcF,EAAeM,EAC7BH,EAAeF,EAAgBK,EAGjC,MAAO,CACLhC,MAAOsC,KAAKE,MAAMZ,GAClB3B,OAAQqC,KAAKE,MAAMX,GACnBL,EAAGc,KAAKE,OAAO/B,EAAiBmB,GAAexB,GAC/CqB,EAAGa,KAAKE,OAAO9B,EAAkBmB,GAAgBxB,KA4BIoC,CACnDzC,EACAC,EACAQ,EACAC,EACAR,EACAE,EACAC,EACAC,EACAC,GAGEe,IAAaV,GACfC,EAAYS,GAGVP,IAAcQ,GAChBP,EAAaO,GAGXC,IAAMP,GACRC,EAAQM,GAGNC,IAAMN,GACRC,EAAQK,IAET,CAAChB,EAAgBC,IAEb,CACLF,IAAAA,EACAR,MAAOY,EACPX,OAAQc,EACRS,EAAGP,EACHQ,EAAGN"}
+{"version":3,"file":"index.min.js","sources":["../src/ScaleMode.ts","../src/useElementFit.ts"],"sourcesContent":["enum ScaleMode {\n  CONTAIN = 'contain',\n  COVER = 'cover',\n  ALIGN_ONLY = 'align-only',\n}\n\nexport default ScaleMode;\n","import { RefObject, useEffect, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport ScaleMode from './ScaleMode';\n\nconst resize = (\n  elementWidth: number,\n  elementHeight: number,\n  containerWidth: number,\n  containerHeight: number,\n  scaleMode: ScaleMode,\n  alignmentX: number = 0.5,\n  alignmentY: number = 0.5,\n  maxWidth?: number | undefined,\n  maxHeight?: number | undefined,\n) => {\n  let targetWidth: number = 0;\n  let targetHeight: number = 0;\n  let boundRatioX: number = 0;\n  let boundRatioY: number = 0;\n  let scale = 1;\n\n  // get needed scale to fit in bounds with cover\n  if (scaleMode === ScaleMode.CONTAIN || scaleMode === ScaleMode.COVER) {\n    boundRatioX = containerWidth / elementWidth;\n    boundRatioY = containerHeight / elementHeight;\n  }\n\n  // get scale for bounds container\n  switch (scaleMode) {\n    case ScaleMode.CONTAIN:\n      scale = boundRatioX < boundRatioY ? boundRatioX : boundRatioY;\n      break;\n    case ScaleMode.COVER:\n      scale = boundRatioX > boundRatioY ? boundRatioX : boundRatioY;\n      break;\n    case ScaleMode.ALIGN_ONLY:\n      targetWidth = elementWidth;\n      targetHeight = elementHeight;\n      break;\n  }\n\n  if (scaleMode === ScaleMode.CONTAIN || scaleMode === ScaleMode.COVER) {\n    // get needed scale to fit in max with contain\n    if (maxWidth || maxHeight) {\n      let scaleMaxRatioX = scale;\n      let scaleMaxRatioY = scale;\n\n      if (maxWidth) {\n        scaleMaxRatioX = maxWidth / elementWidth;\n      }\n\n      if (maxHeight) {\n        scaleMaxRatioY = maxHeight / elementHeight;\n      }\n\n      const scaleMax = scaleMaxRatioX < scaleMaxRatioY ? scaleMaxRatioX : scaleMaxRatioY;\n\n      scale = Math.min(scale, scaleMax);\n    }\n\n    // do the actual scale\n    targetWidth = elementWidth * scale;\n    targetHeight = elementHeight * scale;\n  }\n\n  return {\n    width: Math.round(targetWidth),\n    height: Math.round(targetHeight),\n    x: Math.round((containerWidth - targetWidth) * alignmentX),\n    y: Math.round((containerHeight - targetHeight) * alignmentY),\n  };\n};\n\nconst useElementFit = (\n  width: number,\n  height: number,\n  scaleMode: ScaleMode = ScaleMode.CONTAIN,\n  alignmentX: number = 0.5,\n  alignmentY: number = 0.5,\n  maxWidth?: number | undefined,\n  maxHeight?: number | undefined,\n): {\n  ref: React.RefObject<HTMLElement>;\n  width: number;\n  x: number;\n  y: number;\n  height: number;\n} => {\n  const [ref, containerWidth, containerHeight] = useResizeObserver();\n\n  const [fitWidth, setFitWidth] = useState(1);\n  const [fitHeight, setFitHeight] = useState(1);\n\n  const [fitX, setFitX] = useState(1);\n  const [fitY, setFitY] = useState(1);\n\n  useEffect(() => {\n    const { width: newWidth, height: newHeight, x, y } = resize(\n      width,\n      height,\n      containerWidth,\n      containerHeight,\n      scaleMode,\n      alignmentX,\n      alignmentY,\n      maxWidth,\n      maxHeight,\n    );\n\n    setFitWidth(newWidth);\n    setFitHeight(newHeight);\n    setFitX(x);\n    setFitY(y);\n  }, [\n    containerWidth,\n    containerHeight,\n    width,\n    height,\n    containerWidth,\n    containerHeight,\n    scaleMode,\n    alignmentX,\n    alignmentY,\n    maxWidth,\n    maxHeight,\n  ]);\n\n  return {\n    ref,\n    width: fitWidth,\n    height: fitHeight,\n    x: fitX,\n    y: fitY,\n  };\n};\n\nexport default useElementFit;\n"],"names":["ScaleMode","width","height","scaleMode","CONTAIN","alignmentX","alignmentY","maxWidth","maxHeight","ref","containerWidth","containerHeight","useResizeObserver","fitWidth","setFitWidth","useState","fitHeight","setFitHeight","fitX","setFitX","fitY","setFitY","useEffect","newWidth","newHeight","x","y","elementWidth","elementHeight","targetWidth","targetHeight","boundRatioX","boundRatioY","scale","COVER","ALIGN_ONLY","scaleMaxRatioX","scaleMaxRatioY","scaleMax","Math","min","round","resize"],"mappings":"wTAAA,IAAKA,+CAAL,SAAKA,GACHA,oBACAA,gBACAA,0BAHF,CAAKA,IAAAA,aAMUA,gCCmEO,CACpBC,EACAC,EACAC,EAAuBH,EAAUI,QACjCC,EAAqB,GACrBC,EAAqB,GACrBC,EACAC,KAQA,MAAOC,EAAKC,EAAgBC,GAAmBC,KAExCC,EAAUC,GAAeC,WAAS,IAClCC,EAAWC,GAAgBF,WAAS,IAEpCG,EAAMC,GAAWJ,WAAS,IAC1BK,EAAMC,GAAWN,WAAS,GAiCjC,OA/BAO,YAAU,KACR,MAAQrB,MAAOsB,EAAUrB,OAAQsB,EAASC,EAAEA,EAACC,EAAEA,GA7FpC,EACbC,EACAC,EACAlB,EACAC,EACAR,EACAE,EAAqB,GACrBC,EAAqB,GACrBC,EACAC,KAEA,IAAIqB,EAAsB,EACtBC,EAAuB,EACvBC,EAAsB,EACtBC,EAAsB,EACtBC,EAAQ,EASZ,OANI9B,IAAcH,EAAUI,SAAWD,IAAcH,EAAUkC,QAC7DH,EAAcrB,EAAiBiB,EAC/BK,EAAcrB,EAAkBiB,GAI1BzB,GACN,KAAKH,EAAUI,QACb6B,EAAQF,EAAcC,EAAcD,EAAcC,EAClD,MACF,KAAKhC,EAAUkC,MACbD,EAAQF,EAAcC,EAAcD,EAAcC,EAClD,MACF,KAAKhC,EAAUmC,WACbN,EAAcF,EACdG,EAAeF,EAInB,GAAIzB,IAAcH,EAAUI,SAAWD,IAAcH,EAAUkC,MAAO,CAEpE,GAAI3B,GAAYC,EAAW,CACzB,IAAI4B,EAAiBH,EACjBI,EAAiBJ,EAEjB1B,IACF6B,EAAiB7B,EAAWoB,GAG1BnB,IACF6B,EAAiB7B,EAAYoB,GAG/B,MAAMU,EAAWF,EAAiBC,EAAiBD,EAAiBC,EAEpEJ,EAAQM,KAAKC,IAAIP,EAAOK,GAI1BT,EAAcF,EAAeM,EAC7BH,EAAeF,EAAgBK,EAGjC,MAAO,CACLhC,MAAOsC,KAAKE,MAAMZ,GAClB3B,OAAQqC,KAAKE,MAAMX,GACnBL,EAAGc,KAAKE,OAAO/B,EAAiBmB,GAAexB,GAC/CqB,EAAGa,KAAKE,OAAO9B,EAAkBmB,GAAgBxB,KA4BIoC,CACnDzC,EACAC,EACAQ,EACAC,EACAR,EACAE,EACAC,EACAC,EACAC,GAGFM,EAAYS,GACZN,EAAaO,GACbL,EAAQM,GACRJ,EAAQK,IACP,CACDhB,EACAC,EACAV,EACAC,EACAQ,EACAC,EACAR,EACAE,EACAC,EACAC,EACAC,IAGK,CACLC,IAAAA,EACAR,MAAOY,EACPX,OAAQc,EACRS,EAAGP,EACHQ,EAAGN"}

dist/ScaleMode.d.ts

 declare enum ScaleMode {
-    CONTAIN = 0,
-    COVER = 1,
-    ALIGN_ONLY = 2
+    CONTAIN = "contain",
+    COVER = "cover",
+    ALIGN_ONLY = "align-only"
 }
 export default ScaleMode;

package.json

 {
   "name": "use-element-fit",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "use-element-fit",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -0,1 +1,3 @@
+[![Build Status](https://travis-ci.com/art0rz/use-element-fit.svg?branch=master)](https://travis-ci.com/art0rz/use-element-fit)
+
 # useElementFit
@@ -9,10 +11,15 @@
 import React from 'react';
-import useElementFit from 'use-element-fit';
+import { useElementFit, ScaleMode } from 'use-element-fit';
 
 const App = () => {
-  const {ref, width, height} = useObjectFit(0.5, 1); // half the width and the full height of parent element
+  const {ref, width, height} = useElementFit(0.5, 1, ScaleMode.COVER); // half the width and the full height of parent element
 
   return (
     <div ref={ref}>
-      Size: {width}x{height}
+      <div style={{
+        width: `${width}px`,
+        height: `${height}px`,
+      }}>
+        Size: {width}x{height}
+      </div>
     </div>
@@ -19,0 +26,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

22292

0.9%

Lines of code

125

2.46%

Number of lines in readme file

33

26.92%

No dependency changes