react-resize-detector - npm Package Compare versions

Comparing version 8.1.0 to 9.0.0

build/index.esm.js

@@ -1,2 +0,2 @@
-import React,{cloneElement,isValidElement,createRef,PureComponent,Component,forwardRef,useRef,useState,useEffect,useLayoutEffect}from'react';import {findDOMNode}from'react-dom';import debounce from'lodash/debounce';import throttle from'lodash/throttle';/*! *****************************************************************************
+import React,{cloneElement,isValidElement,createRef,PureComponent,Component,forwardRef,useRef,useState,useCallback,useEffect}from'react';import {findDOMNode}from'react-dom';import debounce from'lodash/debounce';import throttle from'lodash/throttle';/*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -262,9 +262,5 @@
     return forwardRef(forwardRefWrapper);
-}var useEnhancedEffect = isSSR() ? useEffect : useLayoutEffect;
-function useResizeDetector(_a) {
+}function useResizeDetector(_a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.skipOnMount, skipOnMount = _c === void 0 ? false : _c, refreshMode = _b.refreshMode, _d = _b.refreshRate, refreshRate = _d === void 0 ? 1000 : _d, refreshOptions = _b.refreshOptions, _e = _b.handleWidth, handleWidth = _e === void 0 ? true : _e, _f = _b.handleHeight, handleHeight = _f === void 0 ? true : _f, targetRef = _b.targetRef, observerOptions = _b.observerOptions, onResize = _b.onResize;
     var skipResize = useRef(skipOnMount);
-    var localRef = useRef(null);
-    var resizeHandler = useRef();
-    var ref = targetRef !== null && targetRef !== void 0 ? targetRef : localRef;
     var _g = useState({
@@ -274,5 +270,35 @@ width: undefined,
     }), size = _g[0], setSize = _g[1];
-    useEnhancedEffect(function () {
+    // we are going to use this ref to store the last element that was passed to the hook
+    var _h = useState((targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) || null), refElement = _h[0], setRefElement = _h[1];
+    // if targetRef is passed, we need to update the refElement
+    // we have to use setTimeout because ref get assigned after the hook is called
+    // in the future releases we are going to remove targetRef and force users to use ref returned by the hook
+    if (targetRef) {
+        setTimeout(function () {
+            if (targetRef.current !== refElement) {
+                setRefElement(targetRef.current);
+            }
+        }, 0);
+    }
+    // this is a callback that will be called every time the ref is changed
+    // we call setState inside to trigger rerender
+    var onRefChange = useCallback(function (node) {
+        setRefElement(node);
+    }, []);
+    // adding `current` to make it compatible with useRef shape
+    onRefChange.current = refElement;
+    var resizeHandler = useRef();
+    useEffect(function () {
+        return function () {
+            setRefElement(null);
+            onRefChange.current = null;
+        };
+    }, []);
+    useEffect(function () {
         if (!handleWidth && !handleHeight)
             return;
+        if (!refElement && (size.width || size.height)) {
+            setSize({ width: undefined, height: undefined });
+            return;
+        }
         var notifyResize = createNotifier(setSize, handleWidth, handleHeight);
@@ -293,4 +319,4 @@ var resizeCallback = function (entries) {
         var resizeObserver = new window.ResizeObserver(resizeHandler.current);
-        if (ref.current) {
-            resizeObserver.observe(ref.current, observerOptions);
+        if (refElement) {
+            resizeObserver.observe(refElement, observerOptions);
         }
@@ -302,7 +328,7 @@ return function () {
         };
-    }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, observerOptions, ref.current]);
+    }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, observerOptions, refElement]);
     useEffect(function () {
         onResize === null || onResize === void 0 ? void 0 : onResize(size.width, size.height);
     }, [size]);
-    return __assign({ ref: ref }, size);
+    return __assign({ ref: onRefChange }, size);
 }export{ResizeDetector as default,useResizeDetector,withResizeDetector};//# sourceMappingURL=index.esm.js.map

build/index.js

@@ -262,9 +262,5 @@ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react'),reactDom=require('react-dom'),debounce=require('lodash/debounce'),throttle=require('lodash/throttle');/*! *****************************************************************************
     return React.forwardRef(forwardRefWrapper);
-}var useEnhancedEffect = isSSR() ? React.useEffect : React.useLayoutEffect;
-function useResizeDetector(_a) {
+}function useResizeDetector(_a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.skipOnMount, skipOnMount = _c === void 0 ? false : _c, refreshMode = _b.refreshMode, _d = _b.refreshRate, refreshRate = _d === void 0 ? 1000 : _d, refreshOptions = _b.refreshOptions, _e = _b.handleWidth, handleWidth = _e === void 0 ? true : _e, _f = _b.handleHeight, handleHeight = _f === void 0 ? true : _f, targetRef = _b.targetRef, observerOptions = _b.observerOptions, onResize = _b.onResize;
     var skipResize = React.useRef(skipOnMount);
-    var localRef = React.useRef(null);
-    var resizeHandler = React.useRef();
-    var ref = targetRef !== null && targetRef !== void 0 ? targetRef : localRef;
     var _g = React.useState({
@@ -274,5 +270,35 @@ width: undefined,
     }), size = _g[0], setSize = _g[1];
-    useEnhancedEffect(function () {
+    // we are going to use this ref to store the last element that was passed to the hook
+    var _h = React.useState((targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) || null), refElement = _h[0], setRefElement = _h[1];
+    // if targetRef is passed, we need to update the refElement
+    // we have to use setTimeout because ref get assigned after the hook is called
+    // in the future releases we are going to remove targetRef and force users to use ref returned by the hook
+    if (targetRef) {
+        setTimeout(function () {
+            if (targetRef.current !== refElement) {
+                setRefElement(targetRef.current);
+            }
+        }, 0);
+    }
+    // this is a callback that will be called every time the ref is changed
+    // we call setState inside to trigger rerender
+    var onRefChange = React.useCallback(function (node) {
+        setRefElement(node);
+    }, []);
+    // adding `current` to make it compatible with useRef shape
+    onRefChange.current = refElement;
+    var resizeHandler = React.useRef();
+    React.useEffect(function () {
+        return function () {
+            setRefElement(null);
+            onRefChange.current = null;
+        };
+    }, []);
+    React.useEffect(function () {
         if (!handleWidth && !handleHeight)
             return;
+        if (!refElement && (size.width || size.height)) {
+            setSize({ width: undefined, height: undefined });
+            return;
+        }
         var notifyResize = createNotifier(setSize, handleWidth, handleHeight);
@@ -293,4 +319,4 @@ var resizeCallback = function (entries) {
         var resizeObserver = new window.ResizeObserver(resizeHandler.current);
-        if (ref.current) {
-            resizeObserver.observe(ref.current, observerOptions);
+        if (refElement) {
+            resizeObserver.observe(refElement, observerOptions);
         }
@@ -302,7 +328,7 @@ return function () {
         };
-    }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, observerOptions, ref.current]);
+    }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, observerOptions, refElement]);
     React.useEffect(function () {
         onResize === null || onResize === void 0 ? void 0 : onResize(size.width, size.height);
     }, [size]);
-    return __assign({ ref: ref }, size);
+    return __assign({ ref: onRefChange }, size);
 }exports.default=ResizeDetector;exports.useResizeDetector=useResizeDetector;exports.withResizeDetector=withResizeDetector;//# sourceMappingURL=index.js.map

build/types/index.d.ts

 import ResizeDetector from './ResizeDetector';
 import withResizeDetector from './withResizeDetector';
-import useResizeDetector, { UseResizeDetectorReturn } from './useResizeDetector';
-export { withResizeDetector, useResizeDetector, UseResizeDetectorReturn };
-export type { ResizeDetectorProps } from './types';
-export type { useResizeDetectorProps } from './useResizeDetector';
+import useResizeDetector from './useResizeDetector';
+export { withResizeDetector, useResizeDetector };
+export type { ResizeDetectorProps, UseResizeDetectorReturn, useResizeDetectorProps } from './types';
 export default ResizeDetector;

build/types/types.d.ts

 import { ReactNode, RefObject } from 'react';
+import type { MutableRefObject } from 'react';
 export type ReactResizeDetectorDimensions = {
@@ -101,1 +102,11 @@ height?: number;
 };
+export type OnRefChangeType<T = any> = {
+    (node: T | null): void;
+    current?: T | null;
+};
+export interface UseResizeDetectorReturn<T> extends ReactResizeDetectorDimensions {
+    ref: OnRefChangeType<T>;
+}
+export interface useResizeDetectorProps<T extends HTMLElement> extends Props {
+    targetRef?: MutableRefObject<T | null>;
+}

build/types/useResizeDetector.d.ts

@@ -1,10 +0,3 @@
-import type { MutableRefObject } from 'react';
-import type { Props, ReactResizeDetectorDimensions } from './types';
-export interface useResizeDetectorProps<T extends HTMLElement> extends Props {
-    targetRef?: MutableRefObject<T | null>;
-}
+import type { UseResizeDetectorReturn, useResizeDetectorProps } from './types';
 declare function useResizeDetector<T extends HTMLElement = any>({ skipOnMount, refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, targetRef, observerOptions, onResize }?: useResizeDetectorProps<T>): UseResizeDetectorReturn<T>;
 export default useResizeDetector;
-export interface UseResizeDetectorReturn<T> extends ReactResizeDetectorDimensions {
-    ref: MutableRefObject<T | null>;
-}

package.json

 {
   "name": "react-resize-detector",
-  "version": "8.1.0",
+  "version": "9.0.0",
   "description": "React resize detector",
@@ -5,0 +5,0 @@ "main": "build/index.js",

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

128308

increased by4.1%

Lines of code

809

increased by7.29%

No dependency changes