react-resize-detector - npm Package Compare versions

Comparing version 10.0.0-beta.0 to 10.0.0-beta.1

build/index.esm.js

@@ -1,2 +0,2 @@
-import {useRef,useState,useCallback,useEffect}from'react';import debounce from'lodash/debounce';import throttle from'lodash/throttle';/******************************************************************************
+import {useRef,useState,useMemo,useCallback,useEffect}from'react';import debounce from'lodash/debounce';import throttle from'lodash/throttle';/******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -60,11 +60,28 @@
     }
-    // this is a callback that will be called every time the ref is changed
+    // this is a memo that will be called every time the ref is changed
+    // This proxy will properly call setState either when the ref is called as a function or when `.current` is set
     // we call setState inside to trigger rerender
-    var onRefChange = useCallback(function (node) {
-        if (node !== refElement) {
-            setRefElement(node);
-        }
+    var refProxy = useMemo(function () {
+        return new Proxy(function (node) {
+            if (node !== refElement) {
+                setRefElement(node);
+            }
+        }, {
+            get: function (target, prop) {
+                if (prop === 'current') {
+                    return refElement;
+                }
+                return target[prop];
+            },
+            set: function (target, prop, value) {
+                if (prop === 'current') {
+                    setRefElement(value);
+                }
+                else {
+                    target[prop] = value;
+                }
+                return true;
+            }
+        });
     }, [refElement]);
-    // adding `current` to make it compatible with useRef shape
-    onRefChange.current = refElement;
     var shouldSetSize = useCallback(function (prevSize, nextSize) {
@@ -125,3 +142,3 @@ if (prevSize.width === nextSize.width && prevSize.height === nextSize.height) {
     }, [size]);
-    return __assign({ ref: onRefChange }, size);
+    return __assign({ ref: refProxy }, size);
 }export{useResizeDetector};//# sourceMappingURL=index.esm.js.map

build/index.js

@@ -60,11 +60,28 @@ 'use strict';var react=require('react'),debounce=require('lodash/debounce'),throttle=require('lodash/throttle');/******************************************************************************
     }
-    // this is a callback that will be called every time the ref is changed
+    // this is a memo that will be called every time the ref is changed
+    // This proxy will properly call setState either when the ref is called as a function or when `.current` is set
     // we call setState inside to trigger rerender
-    var onRefChange = react.useCallback(function (node) {
-        if (node !== refElement) {
-            setRefElement(node);
-        }
+    var refProxy = react.useMemo(function () {
+        return new Proxy(function (node) {
+            if (node !== refElement) {
+                setRefElement(node);
+            }
+        }, {
+            get: function (target, prop) {
+                if (prop === 'current') {
+                    return refElement;
+                }
+                return target[prop];
+            },
+            set: function (target, prop, value) {
+                if (prop === 'current') {
+                    setRefElement(value);
+                }
+                else {
+                    target[prop] = value;
+                }
+                return true;
+            }
+        });
     }, [refElement]);
-    // adding `current` to make it compatible with useRef shape
-    onRefChange.current = refElement;
     var shouldSetSize = react.useCallback(function (prevSize, nextSize) {
@@ -125,3 +142,3 @@ if (prevSize.width === nextSize.width && prevSize.height === nextSize.height) {
     }, [size]);
-    return __assign({ ref: onRefChange }, size);
+    return __assign({ ref: refProxy }, size);
 }exports.useResizeDetector=useResizeDetector;//# sourceMappingURL=index.js.map

build/types/types.d.ts

@@ -1,2 +0,1 @@
-import { RefObject } from 'react';
 import type { MutableRefObject } from 'react';
@@ -7,5 +6,2 @@ export type ReactResizeDetectorDimensions = {
 };
-export type ChildFunctionProps<ElementT extends HTMLElement> = ReactResizeDetectorDimensions & {
-    targetRef?: RefObject<ElementT>;
-};
 export type ResfreshModeType = 'throttle' | 'debounce';
@@ -12,0 +8,0 @@ export type ResfreshOptionsType = {

package.json

 {
   "name": "react-resize-detector",
-  "version": "10.0.0-beta.0",
+  "version": "10.0.0-beta.1",
   "description": "React resize detector",
@@ -33,6 +33,6 @@ "main": "build/index.js",
     "@types/lodash": "^4.14.202",
-    "@types/react": "^18.2.45",
+    "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.15.0",
-    "@typescript-eslint/parser": "^6.15.0",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
     "eslint": "^8.56.0",
@@ -43,3 +43,3 @@ "eslint-config-prettier": "^9.1.0",
     "prettier": "^3.1.1",
-    "rollup": "^4.9.1",
+    "rollup": "^4.9.2",
     "rollup-plugin-node-externals": "^6.1.2",
@@ -46,0 +46,0 @@ "tslib": "^2.6.2",

README.md

@@ -0,0 +0,0 @@ # Handle element resizes like it's 2024!

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

86524

increased by4.4%

Lines of code

385

increased by8.45%

No dependency changes