react-resize-detector - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

lib/components/ResizeDetector.js

@@ -7,6 +7,2 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -22,4 +18,6 @@
 
-var _resizeDetectorStyles = require('../helpers/resizeDetectorStyles');
+var _resizeObserverPolyfill = require('resize-observer-polyfill');
 
+var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,23 +31,39 @@
 
-var ResizeDetector = function (_Component) {
-  _inherits(ResizeDetector, _Component);
+var styles = {
+  position: 'absolute',
+  width: 0,
+  height: 0,
+  visibility: 'hidden',
+  display: 'none'
+};
 
-  function ResizeDetector() {
+var ResizeDetector = function (_PureComponent) {
+  _inherits(ResizeDetector, _PureComponent);
+
+  function ResizeDetector(props) {
     _classCallCheck(this, ResizeDetector);
 
-    var _this = _possibleConstructorReturn(this, (ResizeDetector.__proto__ || Object.getPrototypeOf(ResizeDetector)).call(this));
+    var _this = _possibleConstructorReturn(this, (ResizeDetector.__proto__ || Object.getPrototypeOf(ResizeDetector)).call(this, props));
 
-    _this.state = {
-      expandChildHeight: 0,
-      expandChildWidth: 0,
-      expandScrollLeft: 0,
-      expandScrollTop: 0,
-      shrinkScrollTop: 0,
-      shrinkScrollLeft: 0,
-      lastWidth: 0,
-      lastHeight: 0
-    };
+    _this.width = undefined;
+    _this.height = undefined;
+    _this.skipOnMount = props.skipOnMount;
 
-    _this.reset = _this.reset.bind(_this);
-    _this.handleScroll = _this.handleScroll.bind(_this);
+    _this.ro = new _resizeObserverPolyfill2.default(function (entries) {
+      entries.forEach(function (entry) {
+        var _entry$contentRect = entry.contentRect,
+            width = _entry$contentRect.width,
+            height = _entry$contentRect.height;
+
+        var notifyWidth = _this.props.handleWidth && _this.width !== width;
+        var notifyHeight = _this.props.handleHeight && _this.height !== height;
+        if (!_this.skipOnMount && (notifyWidth || notifyHeight)) {
+          _this.props.onResize(width, height);
+        }
+
+        _this.width = width;
+        _this.height = height;
+        _this.skipOnMount = false;
+      });
+    });
     return _this;
@@ -59,86 +73,7 @@ }
   _createClass(ResizeDetector, [{
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      this.forceUpdate();
-    }
-  }, {
     key: 'componentDidMount',
     value: function componentDidMount() {
-      var _containerSize = this.containerSize(),
-          _containerSize2 = _slicedToArray(_containerSize, 2),
-          width = _containerSize2[0],
-          height = _containerSize2[1];
-
-      this.reset(width, height);
-      this.props.onResize(width, height);
+      this.ro.observe(this.el.parentElement);
     }
   }, {
-    key: 'shouldComponentUpdate',
-    value: function shouldComponentUpdate(nextProps, nextState) {
-      return this.props !== nextProps || this.state !== nextState;
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      this.expand.scrollLeft = this.expand.scrollWidth;
-      this.expand.scrollTop = this.expand.scrollHeight;
-
-      this.shrink.scrollLeft = this.shrink.scrollWidth;
-      this.shrink.scrollTop = this.shrink.scrollHeight;
-    }
-  }, {
-    key: 'containerSize',
-    value: function containerSize() {
-      return [this.props.handleWidth && this.container.parentElement.offsetWidth, this.props.handleHeight && this.container.parentElement.offsetHeight];
-    }
-  }, {
-    key: 'reset',
-    value: function reset(containerWidth, containerHeight) {
-      if (typeof window === 'undefined') {
-        return;
-      }
-
-      var parent = this.container.parentElement;
-
-      var position = 'static';
-      if (parent.currentStyle) {
-        position = parent.currentStyle.position;
-      } else if (window.getComputedStyle) {
-        position = window.getComputedStyle(parent).position;
-      }
-      if (position === 'static') {
-        parent.style.position = 'relative';
-      }
-
-      this.setState({
-        expandChildHeight: this.expand.offsetHeight + 10,
-        expandChildWidth: this.expand.offsetWidth + 10,
-        lastWidth: containerWidth,
-        lastHeight: containerHeight
-      });
-    }
-  }, {
-    key: 'handleScroll',
-    value: function handleScroll(e) {
-      if (typeof window === 'undefined') {
-        return;
-      }
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      var state = this.state;
-
-      var _containerSize3 = this.containerSize(),
-          _containerSize4 = _slicedToArray(_containerSize3, 2),
-          width = _containerSize4[0],
-          height = _containerSize4[1];
-
-      if (width !== state.lastWidth || height !== state.lastHeight) {
-        this.props.onResize(width, height);
-      }
-
-      this.reset(width, height);
-    }
-  }, {
     key: 'render',
@@ -148,30 +83,8 @@ value: function render() {
 
-      var state = this.state;
-
-
-      var expandStyle = _extends({}, _resizeDetectorStyles.expandChildStyle, {
-        width: state.expandChildWidth,
-        height: state.expandChildHeight
+      return _react2.default.createElement('div', {
+        style: styles,
+        ref: function ref(el) {
+          _this2.el = el;
+        }
       });
-
-      return _react2.default.createElement(
-        'div',
-        { style: _resizeDetectorStyles.parentStyle, ref: function ref(e) {
-            _this2.container = e;
-          } },
-        _react2.default.createElement(
-          'div',
-          { style: _resizeDetectorStyles.parentStyle, onScroll: this.handleScroll, ref: function ref(e) {
-              _this2.expand = e;
-            } },
-          _react2.default.createElement('div', { style: expandStyle })
-        ),
-        _react2.default.createElement(
-          'div',
-          { style: _resizeDetectorStyles.parentStyle, onScroll: this.handleScroll, ref: function ref(e) {
-              _this2.shrink = e;
-            } },
-          _react2.default.createElement('div', { style: _resizeDetectorStyles.shrinkChildStyle })
-        )
-      );
     }
@@ -181,3 +94,3 @@ }]);
   return ResizeDetector;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -190,2 +103,3 @@ exports.default = ResizeDetector;
   handleHeight: _propTypes2.default.bool,
+  skipOnMount: _propTypes2.default.bool,
   onResize: _propTypes2.default.func
@@ -197,2 +111,3 @@ };
   handleHeight: false,
+  skipOnMount: false,
   onResize: function onResize(e) {
@@ -199,0 +114,0 @@ return e;

package.json

 {
   "author": "Vitalii Maslianok <[e-mail]> (https://github.com/maslianok)",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "bugs": {
@@ -13,3 +13,3 @@ "url": "https://github.com/maslianok/react-resize-detector/issues"
     "babel-cli": "^6.26.0",
-    "babel-eslint": "^7.2.3",
+    "babel-eslint": "^8.2.2",
     "babel-plugin-transform-class-properties": "6.24.1",
@@ -19,15 +19,10 @@ "babel-plugin-transform-object-assign": "^6.5.0",
     "babel-preset-react": "^6.24.1",
-    "chai": "4.1.2",
-    "chai-spies": "0.7.1",
-    "eslint": "^4.5.0",
-    "eslint-config-airbnb": "^15.1.0",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^5.0.3",
-    "eslint-plugin-react": "^7.3.0",
-    "isparta": "4.0.0",
-    "jsdom": "11.3.0",
-    "mocha": "4.0.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "rimraf": "^2.6.1"
+    "eslint": "^4.18.1",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.9.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.7.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "rimraf": "^2.6.2"
   },
@@ -38,7 +33,15 @@ "directories": {
   "homepage": "https://github.com/maslianok/react-resize-detector",
-  "keywords": ["react", "resize", "detector"],
+  "keywords": [
+    "react",
+    "resize",
+    "detector"
+  ],
   "license": "MIT",
   "main": "lib/index.js",
-  "maintainers": ["maslianok <[e-mail]>"],
-  "contributors": ["James J. Womack (@james_womack)"],
+  "maintainers": [
+    "maslianok <[e-mail]>"
+  ],
+  "contributors": [
+    "James J. Womack (@james_womack)"
+  ],
   "name": "react-resize-detector",
@@ -50,14 +53,11 @@ "repository": {
   "scripts": {
-    "build":
-      "babel --presets=react,es2015 --plugins=transform-object-assign,transform-class-properties src --out-dir lib",
+    "build": "babel --presets=react,es2015 --plugins=transform-object-assign,transform-class-properties src --out-dir lib",
     "clean": "rimraf lib",
     "lint": "eslint -c .eslintrc src",
-    "prepublishOnly": "npm run lint && npm run clean && npm run build",
-    "test": "npm run test:cov",
-    "test:cov": "babel-node ./node_modules/.bin/isparta cover ./node_modules/.bin/_mocha -- --recursive",
-    "test:watch": "NODE_ENV=test mocha --compilers js:babel/register --recursive --watch"
+    "prepublishOnly": "npm run lint && npm run clean && npm run build"
   },
   "dependencies": {
-    "prop-types": "^15.5.10"
+    "prop-types": "^15.6.0",
+    "resize-observer-polyfill": "^1.5.0"
   }
 }

README.md

@@ -1,17 +0,15 @@
-# React resize detector
+# Handle element resizes like it's 2018!
 
-### Your feedback is highly appreciated! 
+Nowadays browsers start supporting element resize handling natively using [ResizeObserver](https://wicg.github.io/ResizeObserver/). And we use this feature (with [polyfill](resize-observer-polyfill)) to help you handle element resizes in React.
 
-Please, file an issue if something went wrong or let me know via Twitter @maslianok
+#### ⚠️ This change intriduced in v.2.0.0
 
----
+For older implementations please checkout this branch [v.1.1.0](https://github.com/maslianok/react-resize-detector/tree/4fef26243ae4b3aeb386cca8bd829d3299a4a494)
 
-## Event-based Element Resize Detection
-This implementation does NOT use an internal timer to detect size changes (as most implementations do). It uses scroll events.
-Inspired by this article [Cross-Browser, Event-based, Element Resize Detection](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/) written by [Back Alley Coder](http://www.backalleycoder.com/)
+## Demo
 
-## Demo
 #### [Live demo](http://maslianok.github.io/react-resize-detector/)
 
 Local demo:
+
 ```
@@ -24,14 +22,17 @@ git clone https://github.com/maslianok/react-resize-detector.git
 ## Installation
-`npm i react-resize-detector`
 
-## Running the tests
-`npm t`
+```
+npm i react-resize-detector
+// OR
+yarn add react-resize-detector
+```
 
 ## Example
+
 ```javascript
-import React, {Component} from 'react';
-import {render} from 'react-dom';
+import React, { PureComponent } from 'react';
+import { render } from 'react-dom';
 import ReactResizeDetector from 'react-resize-detector';
 
-class App extends Component {
+class App extends PureComponent {
   render() {
@@ -41,3 +42,3 @@ return (
         ...
-        <ReactResizeDetector handleWidth handleHeight onResize={this._onResize} />
+        <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
       </div>
@@ -47,3 +48,3 @@ );
 
-  _onResize = () => {
+  onResize = () => {
     ...
@@ -54,16 +55,24 @@ }
 render(<App />, document.getElementById('root'));
-
 ```
 
 ## API
+
+#### onResize
+
+(Func) Function that will be invoked with `width` and `height` arguments.
+
 #### handleWidth
-(Bool) Trigger `onResize` on width change
 
+(Bool) Trigger `onResize` on width change. Default: `false`.
+
 #### handleHeight
-(Bool) Trigger `onResize` on height change
 
-#### onResize
-(Func) Function that will be invoked with `width` and `height` arguments. When handling only one of dimensions, other argument will be `undefined`.
+(Bool) Trigger `onResize` on height change. Default: `false`.
 
+#### skipOnMount
+
+(Bool) Do not trigger onResize when a component mounts. Default: `false`.
+
 ## License
+
 MIT

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

14

-26.32%

Number of lines in readme file

75

13.64%

Worsened metrics

Total package byte prevSize

112070

-15.79%

Dependency count

3

50%

Lines of code

89

-53.65%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  resize-observer-polyfill@^1.5.0

• + Added

  resize-observer-polyfill@1.5.1
  (transitive)

• Updated

  prop-types@^15.6.0