react-resize-detector - npm Package Compare versions

Comparing version 6.5.0 to 6.6.0

build/index.esm.js

@@ -1,2 +0,2 @@
-import React,{cloneElement,isValidElement,createRef,PureComponent,forwardRef,Component,useRef,useState,useLayoutEffect}from'react';import {findDOMNode}from'react-dom';import debounce from'lodash.debounce';import throttle from'lodash.throttle';/*! *****************************************************************************
+import React,{cloneElement,isValidElement,createRef,PureComponent,forwardRef,Component,useRef,useState,useEffect,useLayoutEffect}from'react';import {findDOMNode}from'react-dom';import debounce from'lodash.debounce';import throttle from'lodash.throttle';/*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -256,3 +256,4 @@
     return forwardRef(forwardRefWrapper);
-}function useResizeDetector(props) {
+}var useEnhancedEffect = isSSR() ? useEffect : useLayoutEffect;
+function useResizeDetector(props) {
     if (props === void 0) { props = {}; }
@@ -268,3 +269,3 @@ var _a = props.skipOnMount, skipOnMount = _a === void 0 ? false : _a, refreshMode = props.refreshMode, _b = props.refreshRate, refreshRate = _b === void 0 ? 1000 : _b, refreshOptions = props.refreshOptions, _c = props.handleWidth, handleWidth = _c === void 0 ? true : _c, _d = props.handleHeight, handleHeight = _d === void 0 ? true : _d, targetRef = props.targetRef, observerOptions = props.observerOptions, onResize = props.onResize;
     }), size = _e[0], setSize = _e[1];
-    useLayoutEffect(function () {
+    useEnhancedEffect(function () {
         if (isSSR()) {
@@ -298,4 +299,4 @@ return;
         };
-    }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, onResize, observerOptions]);
+    }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, onResize, observerOptions, ref.current]);
     return __assign({ ref: ref }, size);
 }export default ResizeDetector;export{useResizeDetector,withResizeDetector};//# sourceMappingURL=index.esm.js.map

build/index.js

@@ -256,3 +256,4 @@ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react'),reactDom=require('react-dom'),debounce=require('lodash.debounce'),throttle=require('lodash.throttle');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var React__default=/*#__PURE__*/_interopDefaultLegacy(React);var debounce__default=/*#__PURE__*/_interopDefaultLegacy(debounce);var throttle__default=/*#__PURE__*/_interopDefaultLegacy(throttle);/*! *****************************************************************************
     return React.forwardRef(forwardRefWrapper);
-}function useResizeDetector(props) {
+}var useEnhancedEffect = isSSR() ? React.useEffect : React.useLayoutEffect;
+function useResizeDetector(props) {
     if (props === void 0) { props = {}; }
@@ -268,3 +269,3 @@ var _a = props.skipOnMount, skipOnMount = _a === void 0 ? false : _a, refreshMode = props.refreshMode, _b = props.refreshRate, refreshRate = _b === void 0 ? 1000 : _b, refreshOptions = props.refreshOptions, _c = props.handleWidth, handleWidth = _c === void 0 ? true : _c, _d = props.handleHeight, handleHeight = _d === void 0 ? true : _d, targetRef = props.targetRef, observerOptions = props.observerOptions, onResize = props.onResize;
     }), size = _e[0], setSize = _e[1];
-    React.useLayoutEffect(function () {
+    useEnhancedEffect(function () {
         if (isSSR()) {
@@ -298,4 +299,4 @@ return;
         };
-    }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, onResize, observerOptions]);
+    }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, onResize, observerOptions, ref.current]);
     return __assign({ ref: ref }, size);
 }exports.default=ResizeDetector;exports.useResizeDetector=useResizeDetector;exports.withResizeDetector=withResizeDetector;//# sourceMappingURL=index.js.map

build/withPolyfill.js

@@ -1,2 +0,2 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react'),reactDom=require('react-dom'),debounce=require('lodash.debounce'),throttle=require('lodash.throttle');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var React__default=/*#__PURE__*/_interopDefaultLegacy(React);var debounce__default=/*#__PURE__*/_interopDefaultLegacy(debounce);var throttle__default=/*#__PURE__*/_interopDefaultLegacy(throttle);/*! *****************************************************************************
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var $inject_window_ResizeObserver=require('resize-observer-polyfill'),React=require('react'),reactDom=require('react-dom'),debounce=require('lodash.debounce'),throttle=require('lodash.throttle');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var $inject_window_ResizeObserver__default=/*#__PURE__*/_interopDefaultLegacy($inject_window_ResizeObserver);var React__default=/*#__PURE__*/_interopDefaultLegacy(React);var debounce__default=/*#__PURE__*/_interopDefaultLegacy(debounce);var throttle__default=/*#__PURE__*/_interopDefaultLegacy(throttle);/*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -188,3 +188,3 @@
         _this.resizeHandler = patchResizeHandler(_this.createResizeHandler, refreshMode, refreshRate, refreshOptions);
-        _this.resizeObserver = new window.ResizeObserver(_this.resizeHandler);
+        _this.resizeObserver = new $inject_window_ResizeObserver__default['default'](_this.resizeHandler);
         return _this;
@@ -235,5 +235,3 @@ }
     return ResizeDetector;
-}(React.PureComponent));
-//# sourceMappingURL=ResizeDetector.js.map
-function withResizeDetector(ComponentInner, options) {
+}(React.PureComponent));function withResizeDetector(ComponentInner, options) {
     var ResizeDetectorHOC = /** @class */ (function (_super) {
@@ -260,3 +258,4 @@ __extends(ResizeDetectorHOC, _super);
     return React.forwardRef(forwardRefWrapper);
-}function useResizeDetector(props) {
+}var useEnhancedEffect = isSSR() ? React.useEffect : React.useLayoutEffect;
+function useResizeDetector(props) {
     if (props === void 0) { props = {}; }
@@ -272,3 +271,3 @@ var _a = props.skipOnMount, skipOnMount = _a === void 0 ? false : _a, refreshMode = props.refreshMode, _b = props.refreshRate, refreshRate = _b === void 0 ? 1000 : _b, refreshOptions = props.refreshOptions, _c = props.handleWidth, handleWidth = _c === void 0 ? true : _c, _d = props.handleHeight, handleHeight = _d === void 0 ? true : _d, targetRef = props.targetRef, observerOptions = props.observerOptions, onResize = props.onResize;
     }), size = _e[0], setSize = _e[1];
-    React.useLayoutEffect(function () {
+    useEnhancedEffect(function () {
         if (isSSR()) {
@@ -291,3 +290,3 @@ return;
         resizeHandler.current = patchResizeHandler(resizeCallback, refreshMode, refreshRate, refreshOptions);
-        var resizeObserver = new window.ResizeObserver(resizeHandler.current);
+        var resizeObserver = new $inject_window_ResizeObserver__default['default'](resizeHandler.current);
         if (ref.current) {
@@ -303,6 +302,4 @@ resizeObserver.observe(ref.current, observerOptions);
         };
-    }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, onResize, observerOptions]);
+    }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, onResize, observerOptions, ref.current]);
     return __assign({ ref: ref }, size);
-}
-//# sourceMappingURL=useResizeDetector.js.map
-exports.default=ResizeDetector;exports.useResizeDetector=useResizeDetector;exports.withResizeDetector=withResizeDetector;//# sourceMappingURL=withPolyfill.js.map
+}exports.default=ResizeDetector;exports.useResizeDetector=useResizeDetector;exports.withResizeDetector=withResizeDetector;//# sourceMappingURL=withPolyfill.js.map

package.json

@@ -54,3 +54,3 @@ {
   "author": "Vitalii Maslianok <[e-mail]> (https://github.com/maslianok)",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "bugs": {
@@ -57,0 +57,0 @@ "url": "https://github.com/maslianok/react-resize-detector/issues"

README.md

@@ -84,3 +84,3 @@ # Handle element resizes like it's 2021!
 const CustomComponent = () => {
-  const targetRef = userRef();
+  const targetRef = useRef();
   const { width, height } = useResizeDetector({ targetRef });
@@ -269,13 +269,13 @@ return <div ref={targetRef}>{`${width}x${height}`}</div>;
 
-| Prop           | Type   | Description                                                                                                                                                                                    | Default     |
-| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| onResize       | Func   | Function that will be invoked with `width` and `height` arguments                                                                                                                              | `undefined` |
-| handleWidth    | Bool   | Trigger `onResize` on width change                                                                                                                                                             | `true`      |
-| handleHeight   | Bool   | Trigger `onResize` on height change                                                                                                                                                            | `true`      |
-| skipOnMount    | Bool   | Do not trigger onResize when a component mounts                                                                                                                                                | `false`     |
-| refreshMode    | String | Possible values: `throttle` and `debounce` See [lodash docs](https://lodash.com/docs#debounce) for more information. `undefined` - callback will be fired for every frame                      | `undefined` |
-| refreshRate    | Number | Use this in conjunction with `refreshMode`. Important! It's a numeric prop so set it accordingly, e.g. `refreshRate={500}`                                                                     | `1000`      |
-| refreshOptions | Object | Use this in conjunction with `refreshMode`. An object in shape of `{ leading: bool, trailing: bool }`. Please refer to [lodash's docs](https://lodash.com/docs/4.17.11#throttle) for more info | `undefined` |
-| observeOptions | Object | These options will be used as a second parameter of [`resizeObserver.observe`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe) method. | `undefined` |
-| targetRef      | Ref    | Use this prop to pass a reference to the element you want to attach resize handlers to. It must be an instance of `React.useRef` or `React.createRef` functions                                | `undefined` |
+| Prop            | Type   | Description                                                                                                                                                                                    | Default     |
+| --------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| onResize        | Func   | Function that will be invoked with `width` and `height` arguments                                                                                                                              | `undefined` |
+| handleWidth     | Bool   | Trigger `onResize` on width change                                                                                                                                                             | `true`      |
+| handleHeight    | Bool   | Trigger `onResize` on height change                                                                                                                                                            | `true`      |
+| skipOnMount     | Bool   | Do not trigger onResize when a component mounts                                                                                                                                                | `false`     |
+| refreshMode     | String | Possible values: `throttle` and `debounce` See [lodash docs](https://lodash.com/docs#debounce) for more information. `undefined` - callback will be fired for every frame                      | `undefined` |
+| refreshRate     | Number | Use this in conjunction with `refreshMode`. Important! It's a numeric prop so set it accordingly, e.g. `refreshRate={500}`                                                                     | `1000`      |
+| refreshOptions  | Object | Use this in conjunction with `refreshMode`. An object in shape of `{ leading: bool, trailing: bool }`. Please refer to [lodash's docs](https://lodash.com/docs/4.17.11#throttle) for more info | `undefined` |
+| observerOptions | Object | These options will be used as a second parameter of [`resizeObserver.observe`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe) method.                                | `undefined` |
+| targetRef       | Ref    | Use this prop to pass a reference to the element you want to attach resize handlers to. It must be an instance of `React.useRef` or `React.createRef` functions                                | `undefined` |
 
@@ -282,0 +282,0 @@ ## License

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

Improved metrics

Total package byte prevSize

173300

increased by0.57%

Worsened metrics

Lines of code

1036

decreased by-0.1%

No dependency changes