react-resize-detector - npm Package Compare versions

Comparing version 9.1.1 to 9.1.2-beta.0

build/index.esm.js

@@ -1,2 +0,2 @@
-import React,{isValidElement,createRef,cloneElement,PureComponent,Component,forwardRef,useRef,useState,useCallback,useEffect}from'react';import {findDOMNode}from'react-dom';import debounce from'lodash/debounce';import throttle from'lodash/throttle';/******************************************************************************
+import React,{isValidElement,createRef,cloneElement,PureComponent,Component,forwardRef,useRef,useState,useMemo,useCallback,useEffect}from'react';import {findDOMNode}from'react-dom';import debounce from'lodash/debounce';import throttle from'lodash/throttle';/******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -288,11 +288,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) {
@@ -353,3 +370,3 @@ if (prevSize.width === nextSize.width && prevSize.height === nextSize.height) {
     }, [size]);
-    return __assign({ ref: onRefChange }, size);
+    return __assign({ ref: refProxy }, size);
 }export{ResizeDetector as default,useResizeDetector,withResizeDetector};//# sourceMappingURL=index.esm.js.map

build/index.js

@@ -288,11 +288,28 @@ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react'),reactDom=require('react-dom'),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) {
@@ -353,3 +370,3 @@ if (prevSize.width === nextSize.width && prevSize.height === nextSize.height) {
     }, [size]);
-    return __assign({ ref: onRefChange }, size);
+    return __assign({ ref: refProxy }, size);
 }exports.default=ResizeDetector;exports.useResizeDetector=useResizeDetector;exports.withResizeDetector=withResizeDetector;//# sourceMappingURL=index.js.map

package.json

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

README.md

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

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

152208

increased by3.47%

Lines of code

890

increased by3.97%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes