react-resize-detector - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

lib/components/ResizeDetector.js

@@ -21,2 +21,10 @@ 'use strict';
 
+var _lodash = require('lodash.debounce');
+
+var _lodash2 = _interopRequireDefault(_lodash);
+
+var _lodash3 = require('lodash.throttle');
+
+var _lodash4 = _interopRequireDefault(_lodash3);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,2 +38,4 @@
 
+var listMode = { debounce: _lodash2.default, throttle: _lodash4.default };
+
 var styles = {
@@ -47,7 +57,3 @@ position: 'absolute',
 
-    _this.width = undefined;
-    _this.height = undefined;
-    _this.skipOnMount = props.skipOnMount;
-
-    _this.ro = new _resizeObserverPolyfill2.default(function (entries) {
+    _this.createResizeObserver = function (entries) {
       entries.forEach(function (entry) {
@@ -63,3 +69,2 @@ var _entry$contentRect = entry.contentRect,
         }
-
         _this.width = width;
@@ -69,3 +74,16 @@ _this.height = height;
       });
-    });
+    };
+
+    var skipOnMount = props.skipOnMount,
+        refreshMode = props.refreshMode,
+        refreshRate = props.refreshRate;
+
+
+    _this.width = undefined;
+    _this.height = undefined;
+    _this.skipOnMount = skipOnMount;
+
+    var resizeObserver = listMode[refreshMode] && listMode[refreshMode](_this.createResizeObserver, refreshRate) || _this.createResizeObserver;
+
+    _this.ro = new _resizeObserverPolyfill2.default(resizeObserver);
     return _this;
@@ -107,2 +125,4 @@ }
   skipOnMount: _propTypes2.default.bool,
+  refreshRate: _propTypes2.default.number,
+  refreshMode: _propTypes2.default.string,
   resizableElementId: _propTypes2.default.string,
@@ -116,2 +136,4 @@ onResize: _propTypes2.default.func
   skipOnMount: false,
+  refreshRate: 1000,
+  refreshMode: undefined,
   resizableElementId: '',
@@ -118,0 +140,0 @@ onResize: function onResize(e) {

package.json

 {
   "author": "Vitalii Maslianok <[e-mail]> (https://github.com/maslianok)",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "bugs": {
@@ -56,2 +56,4 @@ "url": "https://github.com/maslianok/react-resize-detector/issues"
   "dependencies": {
+    "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
     "prop-types": "^15.6.0",
@@ -58,0 +60,0 @@ "resize-observer-polyfill": "^1.5.0"

README.md

@@ -74,6 +74,14 @@ # Handle element resizes like it's 2018!
 
-(string) Id of the element we want to observe. If no one provided, parentElement of the component will be used. Default: ``.
+(String) Id of the element we want to observe. If no one provided, parentElement of the component will be used. Default: ``.
 
+### refreshMode
+
+(String) Possible values: `throttle` and `debounce` See [lodash docs](https://lodash.com/docs#debounce) for more information. Default: `undefined` - means that callback will be fired as often as ResizeObserver allows
+
+### refreshRate
+
+(Number) Makes sense only when `refreshMode` is set. Default: `1000`. Important! It's numeric prop so set it correctly, e.g. `refreshRate={500}`
+
 ## License
 
 MIT

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

113993

increased by1.34%

Lines of code

109

increased by14.74%

Number of lines in readme file

87

increased by10.13%

Worsened metrics

Dependency count

5

increased by66.67%

Dependency changes

• + Addedlodash.debounce@^4.0.8

• + Addedlodash.throttle@^4.1.1

• + Addedlodash.debounce@4.0.8(transitive)

• + Addedlodash.throttle@4.1.1(transitive)