use-aspect-ratio - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/app.bundle.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.UseAspectRatio=t(require("react")):e.UseAspectRatio=t(e.React)}(window,function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(1);function o(){return{innerHeight:window.innerHeight,innerWidth:window.innerWidth,outerHeight:window.outerHeight,outerWidth:window.outerWidth}}function u(e){var t=r.useState(o()),n=t[0],u=t[1],i=function(){window.requestAnimationFrame(function(){var t=o();e(t),u(t)})};return r.useEffect(function(){return e(n),window.addEventListener("resize",i,!1),function(){return window.removeEventListener("resize",i,!1)}},[]),n}t.useWindowSize=u,t.useAspectRatio=function(e){var t=r.useRef(null),n=r.useState(600),o=n[0],i=n[1];return u(function(){return t.current&&i(t.current.clientWidth)}),r.useEffect(function(){t.current&&(t.current.style.height=Math.round(o/e)+"px")},[o]),t}},function(t,n){t.exports=e}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.UseAspectRatio=t(require("react")):e.UseAspectRatio=t(e.React)}(window,function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(1);function o(){return{innerHeight:window.innerHeight,innerWidth:window.innerWidth,outerHeight:window.outerHeight,outerWidth:window.outerWidth}}t.useWindowSize=function(e){var t=r.useState(o()),n=t[0],i=t[1],u=function(){window.requestAnimationFrame(function(){var t=o();e(t),i(t)})};return r.useEffect(function(){return e(n),window.addEventListener("resize",u,!1),function(){return window.removeEventListener("resize",u,!1)}},[]),n},t.useAspectRatio=function(e){return r.useCallback(function(t){null!==t&&(t.style.height=Math.round(t.clientWidth/e)+"px")},[])}},function(t,n){t.exports=e}])});

dist/index.d.ts

@@ -1,2 +0,1 @@
-import { RefObject } from 'react';
 declare type WindowSize = {
@@ -9,3 +8,3 @@ readonly innerHeight: number;
 export declare function useWindowSize(callback?: Function): WindowSize;
-export declare function useAspectRatio(ratio: number): RefObject<HTMLElement>;
+export declare function useAspectRatio(ratio: number): (node: any) => void;
 export {};

package.json

@@ -79,7 +79,7 @@ {
   },
-  "version": "1.0.0",
-  "dependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+  "version": "1.0.1",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
   }
 }

src/index.ts

@@ -1,2 +0,2 @@
-import { useState, useEffect, useRef, RefObject } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 
@@ -49,15 +49,10 @@ type WindowSize = {
 
-export function useAspectRatio(ratio: number): RefObject<HTMLElement> {
-  const ref = useRef<HTMLElement>(null);
-
-  const [mediaWidth, setMediaWidth] = useState(600);
-  useWindowSize(() => ref.current && setMediaWidth(ref.current.clientWidth));
-
-  useEffect(
-    () => {
-      if (ref.current) {
-        ref.current.style.height = `${Math.round(mediaWidth / ratio)}px`;
+export function useAspectRatio(ratio: number) {
+  const ref = useCallback(
+    (node) => {
+      if (node !== null) {
+        node.style.height = `${Math.round(node.clientWidth / ratio)}px`;
       }
     },
-    [mediaWidth],
+    [],
   );
@@ -64,0 +59,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

21103

decreased by-3.34%

Lines of code

221

decreased by-1.78%

Dependency changes

• + Addedreact@18.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removedreact@^16.8.6

• - Removedreact-dom@^16.8.6

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedscheduler@0.19.1(transitive)