react-detectable-overflow - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/DetectableOverflow.d.ts

@@ -17,3 +17,3 @@ import * as React from 'react';
     updateState(): void;
-    render(): React.DOMElement<React.DOMAttributes<Element>, Element>;
+    render(): JSX.Element;
 }

dist/DetectableOverflow.js

@@ -29,3 +29,3 @@ "use strict";
         var _this = _super.call(this, props) || this;
-        _this.ref = null;
+        _this.ref = React.createRef();
         _this.state = { isOverflowed: false };
@@ -42,7 +42,7 @@ _this.updateState = _this.updateState.bind(_this);
     DetectableOverflow.prototype.updateState = function () {
-        if (this.ref === null) {
+        if (this.ref.current === null) {
             return;
         }
-        var newState = this.ref.offsetWidth !== this.ref.scrollWidth ||
-            this.ref.offsetHeight !== this.ref.scrollHeight;
+        var newState = this.ref.current.offsetWidth !== this.ref.current.scrollWidth ||
+            this.ref.current.offsetHeight !== this.ref.current.scrollHeight;
         if (newState === this.state.isOverflowed) {
@@ -57,14 +57,10 @@ return;
     DetectableOverflow.prototype.render = function () {
-        var _this = this;
         var tag = this.props.tag ? this.props.tag : defaultTag;
         var style = this.props.style ? this.props.style : defaultStyle;
         var className = this.props.className ? this.props.className : '';
-        var props = {
+        return (React.createElement(react_resize_detector_1.default, { handleWidth: true, onResize: this.updateState, targetRef: this.ref }, React.createElement(tag, {
             style: style,
             className: className,
-            ref: function (el) {
-                _this.ref = (el instanceof HTMLElement) ? el : null;
-            },
-        };
-        return React.createElement(tag, props, React.createElement(react_resize_detector_1.default, { handleWidth: true, onResize: this.updateState }), this.props.children);
+            ref: this.ref,
+        }, this.props.children)));
     };
@@ -71,0 +67,0 @@ return DetectableOverflow;

package.json

 {
   "name": "react-detectable-overflow",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A React component that informs when the overflowed status is changed.",
@@ -37,3 +37,3 @@ "author": {
     "@types/react-dom": "^16.9.4",
-    "@types/react-resize-detector": "^4.2.0",
+    "@types/react-resize-detector": "^5.0.0",
     "@types/sinon": "^7.5.1",
@@ -53,3 +53,3 @@ "enzyme": "^3.11.0",
   "dependencies": {
-    "react-resize-detector": "^4.2.1"
+    "react-resize-detector": "^5.2.0"
   },
@@ -56,0 +56,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

14430

0.35%

Number of package files

15

7.14%

Lines of code

196

1.03%

Dependency changes

• + Added

  react-resize-detector@5.2.0
  (transitive)

• - Removed

  lodash-es@4.17.21
  (transitive)

• - Removed

  react-resize-detector@4.2.3
  (transitive)

• Updated

  react-resize-detector@^5.2.0