react-resize-aware - npm Package Compare versions

Comparing version 3.1.3 to 4.0.0

dist/index.modern.js

@@ -1,2 +0,2 @@
-import{useEffect as e,useRef as n,useState as t,useCallback as r,useMemo as i}from"react";var o={display:"block",opacity:0,position:"absolute",top:0,left:0,height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:-1,maxHeight:"inherit",maxWidth:"inherit"},u=function(t){var r=t.onResize,i=n();return function(n,t){var r=function(){return n.current&&n.current.contentDocument&&n.current.contentDocument.defaultView};function i(){t();var e=r();e&&e.addEventListener("resize",t)}e((function(){return r()?i():n.current&&n.current.addEventListener&&n.current.addEventListener("load",i),function(){var e=r();e&&"function"==typeof e.removeEventListener&&e.removeEventListener("resize",t)}}),[])}(i,(function(){return r(i)})),jsx("iframe",{style:o,src:"about:blank",ref:i,"aria-hidden":!0,tabIndex:-1,frameBorder:0})},c=function(e){return{width:null!=e?e.offsetWidth:null,height:null!=e?e.offsetHeight:null}};export default function(e){void 0===e&&(e=c);var n=t(e(null)),o=n[0],a=n[1],f=r((function(n){return a(e(n.current))}),[e]);return[i((function(){return jsx(u,{onResize:f})}),[f]),o]}
+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

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):(e=e||self).useResizeAware=n(e.react)}(this,(function(e){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"},t=function(t){var r=t.onResize,i=e.useRef();return function(n,t){var r=function(){return n.current&&n.current.contentDocument&&n.current.contentDocument.defaultView};function i(){t();var e=r();e&&e.addEventListener("resize",t)}e.useEffect((function(){return r()?i():n.current&&n.current.addEventListener&&n.current.addEventListener("load",i),function(){var e=r();e&&"function"==typeof e.removeEventListener&&e.removeEventListener("resize",t)}}),[])}(i,(function(){return r(i)})),jsx("iframe",{style:n,src:"about:blank",ref:i,"aria-hidden":!0,tabIndex:-1,frameBorder:0})},r=function(e){return{width:null!=e?e.offsetWidth:null,height:null!=e?e.offsetHeight:null}};return function(n){void 0===n&&(n=r);var i=e.useState(n(null)),u=i[0],o=i[1],f=e.useCallback((function(e){return o(n(e.current))}),[n]);return[e.useMemo((function(){return jsx(t,{onResize:f})}),[f]),u]}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["react","react/jsx-runtime"],t):(e||self).reactResizeAware=t(e.react,e.jsx)}(this,function(e,t){function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,t}var r=/*#__PURE__*/n(e),i={display:"block",opacity:0,position:"absolute",top:0,left:0,height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:-1,maxHeight:"inherit",maxWidth:"inherit"},u=function(e){var n=e.onResize,u=r.useRef();return function(e,t){var n=function(){return e.current&&e.current.contentDocument&&e.current.contentDocument.defaultView};function i(){t();var e=n();e&&e.addEventListener("resize",t)}r.useEffect(function(){return n()?i():e.current&&"addEventListener"in e.current&&e.current.addEventListener("load",i),function(){var e=n();null!=e&&e&&"function"==typeof e.removeEventListener&&e.removeEventListener("resize",t)}},[])}(u,function(){return n(u)}),/*#__PURE__*/t.jsx("iframe",{style:i,src:"about:blank",ref:u,"aria-hidden":!0,tabIndex:-1,frameBorder:0})},o=function(e){return null!=e?{width:e.offsetWidth,height:e.offsetHeight}:null};return function(e){void 0===e&&(e=o);var n=r.useState(e(null)),i=n[0],c=n[1],f=r.useCallback(function(t){return c(e(t.current))},[e]);return[r.useMemo(function(){/*#__PURE__*/return t.jsx(u,{onResize:f})},[f]),i]}});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "react-resize-aware",
-  "version": "3.1.3",
+  "version": "4.0.0",
   "description": "A React hook that makes it possible to listen to element resize events.",
@@ -26,8 +26,13 @@ "homepage": "https://github.com/FezVrasta/react-resize-aware#readme",
   ],
-  "main": "dist/index.js",
-  "umd:main": "dist/index.umd.js",
-  "source": "src/index.js",
+  "type": "module",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.modern.js",
+  "source": "./src/index.js",
+  "exports": {
+    "require": "./dist/index.cjs",
+    "default": "./dist/index.modern.js"
+  },
   "scripts": {
     "start": "microbundle watch",
-    "prepare": "microbundle --name useResizeAware --jsx jsx --jsxImportSource react --globals react/jsx-runtime=jsx && cp -f dist/index.umd.js docs/react-resize-aware.js && flow-copy-source src dist && cp src/index.d.ts dist/index.d.ts"
+    "prepare": "rm -rf dist && microbundle --jsx 'React.createElement' --jsxImportSource react --globals react/jsx-runtime=jsx && flow-copy-source src dist && cp ./dist/index.js.flow ./dist/index.umd.js.flow && cp ./src/index.d.ts ./dist"
   },
@@ -39,5 +44,5 @@ "files": [
   "devDependencies": {
-    "flow-bin": "^0.113.0",
+    "flow-bin": "0.199.1",
     "flow-copy-source": "^2.0.9",
-    "microbundle": "0.12.0-next.6",
+    "microbundle": "^0.15.1",
     "react": "16.12.0"
@@ -44,0 +49,0 @@ },

README.md

@@ -31,4 +31,4 @@ # react-resize-aware
 ```jsx
-import React from 'react';
-import useResizeAware from 'react-resize-aware';
+import React from "react";
+import useResizeAware from "react-resize-aware";
 
@@ -39,5 +39,5 @@ const App = () => {
   return (
-    <div style={{ position: 'relative' }}>
+    <div style={{ position: "relative" }}>
       {resizeListener}
-      Your content here. (div sizes are {sizes.width} x {sizes.height})
+      Your content here. (div sizes are {sizes?.width} x {sizes?.height})
     </div>
@@ -62,3 +62,3 @@ );
 
-This object contains the `width` and `height` properties, these properties are going to be `null` before the component rendered, and will return a `number` after the component rendered.
+This object contains the `width` and `height` properties, it could be `null` if the element is not yet rendered.
 
@@ -69,5 +69,5 @@ ## Custom `reporter`
 
-```jsx
-const customReporter = target => ({
-  clientWidth: target != null ? target.clientWidth : null,
+```tsx
+const customReporter = (target: ?HTMLIFrameElement) => ({
+  clientWidth: target != null ? target.clientWidth : 0,
 });
@@ -78,3 +78,3 @@
 return (
-  <div style={{ position: 'relative' }}>
+  <div style={{ position: "relative" }}>
     {resizeListener}
@@ -95,9 +95,9 @@ Your content here. (div clientWidth is {sizes.clientWidth})
   const [resizeListener, sizes] = useResizeAware();
-  
+
   React.useEffect(() => {
-    console.log('Do something with the new size values');
+    console.log("Do something with the new size values");
   }, [sizes.width, sizes.height]);
 
   return (
-    <div style={{ position: 'relative' }}>
+    <div style={{ position: "relative" }}>
       {resizeListener}
@@ -107,3 +107,3 @@ Your content here.
   );
-}
+};
 ```

src/index.js

 // @flow
-export { default } from './useResizeAware';
+import useResizeAware from "./useResizeAware";
+export default useResizeAware;

src/ResizeListener.js

 // @flow
-import * as React from 'react';
-import useOnResize from './useOnResize';
+import * as React from "react";
+import useOnResize from "./useOnResize";
 
+export type ReactRef<T> = { current: ?T };
+
 const style = {
-  display: 'block',
+  display: "block",
   opacity: 0,
-  position: 'absolute',
+  position: "absolute",
   top: 0,
   left: 0,
-  height: '100%',
-  width: '100%',
-  overflow: 'hidden',
-  pointerEvents: 'none',
+  height: "100%",
+  width: "100%",
+  overflow: "hidden",
+  pointerEvents: "none",
   zIndex: -1,
-  maxHeight: 'inherit',
-  maxWidth: 'inherit',
+  maxHeight: "inherit",
+  maxWidth: "inherit",
 };
@@ -25,4 +27,4 @@
 }: {
-  onResize: (React.ElementRef<any>) => void,
-}) => {
+  onResize: (ReactRef<HTMLIFrameElement>) => void,
+}): React.Node => {
   const ref = React.useRef();
@@ -29,0 +31,0 @@ useOnResize(ref, () => onResize(ref));

src/useOnResize.js

 // @flow
-import * as React from 'react';
+import * as React from "react";
 
+export type ReactRef<T> = { current: ?T };
+
 // This is just an utility to cleanly attach a `resize` event listener
 // to a target HTMLObjectElement or HTMLIFrameElement
 // The real Hook is `useResizeAware.js`
-export default (ref: React.ElementRef<any>, onResize: () => void) => {
-  const getTarget = () => ref.current && ref.current.contentDocument && ref.current.contentDocument.defaultView;
+export default (
+  ref: ReactRef<HTMLIFrameElement>,
+  onResize: () => void
+): void => {
+  const getTarget = () =>
+    ref.current &&
+    ref.current.contentDocument &&
+    ref.current.contentDocument.defaultView;
   function run() {
@@ -13,3 +21,3 @@ // trigger onResize event on mount to provide initial sizes
     var target = getTarget();
-    target && target.addEventListener('resize', onResize);
+    target && target.addEventListener("resize", onResize);
   }
@@ -19,6 +27,5 @@ React.useEffect(() => {
       run();
+    } else if (ref.current && "addEventListener" in ref.current) {
+      ref.current.addEventListener("load", run);
     }
-    else if (ref.current && ref.current.addEventListener) {
-      ref.current.addEventListener('load', run)
-    }
 
@@ -31,8 +38,10 @@ // clean event listener on unmount
       const target = getTarget();
+      if (target == null) return;
+
       const isListener =
-        target && typeof target.removeEventListener === 'function';
+        target && typeof target.removeEventListener === "function";
 
-      isListener && target.removeEventListener('resize', onResize);
+      isListener && target.removeEventListener("resize", onResize);
     };
   }, []);
 };

src/useResizeAware.js

 // @flow
-import * as React from 'react';
-import ResizeListener from './ResizeListener';
+import * as React from "react";
+import ResizeListener from "./ResizeListener";
 
-const defaultReporter = (target: ?HTMLElement) => ({
-  width: target != null ? target.offsetWidth : null,
-  height: target != null ? target.offsetHeight : null,
-});
+type Reporter<T> = (target: ?HTMLIFrameElement) => T;
 
+const defaultReporter = (target: ?HTMLIFrameElement) =>
+  target != null
+    ? {
+        width: target.offsetWidth,
+        height: target.offsetHeight,
+      }
+    : null;
+
+declare export default function useResizeAware(): [
+  React.Node,
+  ?{ width: number, height: number }
+];
+declare export default function useResizeAware<T>(
+  reporter: Reporter<T>
+): [React.Node, T];
+
 export default function useResizeAware(
-  reporter: typeof defaultReporter = defaultReporter
+  reporter?: Reporter<mixed> = defaultReporter
 ) {
   const [sizes, setSizes] = React.useState(reporter(null));
-  const onResize = React.useCallback(ref => setSizes(reporter(ref.current)), [
-    reporter,
-  ]);
+  const onResize = React.useCallback(
+    (ref) => setSizes(reporter(ref.current)),
+    [reporter]
+  );
   const resizeListenerNode = React.useMemo(
@@ -18,0 +32,0 @@ () => <ResizeListener onResize={onResize} />,

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Lines of code

141

increased by14.63%

Is type module

Yes

Worsened metrics

Total package byte prevSize

31973

decreased by-3.52%

Number of package files

20

decreased by-4.76%

No dependency changes