@avinlab/react-size-me - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

@@ -6,1 +6,4 @@ Changelog
 Initial release of library
+
+# 1.1.0
+Using `element-resize-detector` to catch container's resize events

dist/index.cjs.js

@@ -5,4 +5,6 @@ 'use strict';
 
+var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
 var _inheritsLoose = _interopDefault(require('@babel/runtime/helpers/inheritsLoose'));
 var React = _interopDefault(require('react'));
+var elementResizeDetectorMaker = _interopDefault(require('element-resize-detector'));
 
@@ -22,6 +24,17 @@ var SizeMe =
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this._root = void 0;
+    _this._parentNode = void 0;
+    _this._elementResizeDetector = void 0;
     _this.state = {
-      width: null,
-      height: null
+      width: _this.props.defaultHeight || null,
+      height: _this.props.defaultHeight || null
     };
+
+    _this._resizeListener = function (element) {
+      _this.setState({
+        width: element.clientWidth,
+        height: element.clientHeight
+      });
+    };
+
     return _this;
@@ -33,11 +46,24 @@ }
   _proto.componentDidMount = function componentDidMount() {
-    console.log(this.root.parentNode);
-    this.setState({
-      width: this.root.parentNode.clientWidth,
-      height: this.root.parentNode.clientHeight
-    });
+    if (this._root && this._root.parentNode && this._root.parentNode instanceof this._root.parentNode.ownerDocument.defaultView.HTMLElement) {
+      this._parentNode = this._root.parentNode;
+      this._elementResizeDetector = elementResizeDetectorMaker({
+        strategy: 'scroll'
+      });
+
+      this._elementResizeDetector.listenTo(this._parentNode, this._resizeListener);
+    }
   };
 
-  _proto.renderContent = function renderContent() {
-    var children = this.props.children;
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this._elementResizeDetector && this._parentNode) {
+      this._elementResizeDetector.removeListener(this._parentNode, this._resizeListener);
+    }
+  };
+
+  _proto._renderContent = function _renderContent() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        disableHeight = _this$props.disableHeight,
+        disableWidth = _this$props.disableWidth,
+        onResize = _this$props.onResize;
     var _this$state = this.state,
@@ -47,7 +73,17 @@ width = _this$state.width,
 
-    if (width !== null && typeof children === 'function') {
-      return children({
-        width: width,
-        height: height
-      });
+    if (typeof children === 'function') {
+      if (width !== null && height !== null) {
+        var params = {};
+
+        if (!disableHeight) {
+          params.height = height;
+        }
+
+        if (!disableWidth) {
+          params.width = width;
+        }
+
+        onResize(params);
+        return children(params);
+      }
     }
@@ -59,7 +95,13 @@ };
 
-    return React.createElement("span", {
+    var _this$props2 = this.props,
+        style = _this$props2.style,
+        className = _this$props2.className;
+    return React.createElement("span", _extends({
+      style: style,
+      className: className
+    }, {
       ref: function ref(i) {
-        return _this2.root = i;
+        return _this2._root = i;
       }
-    }, this.renderContent());
+    }), this._renderContent());
   };
@@ -70,2 +112,9 @@
 
+SizeMe.defaultProps = {
+  disableHeight: false,
+  disableWidth: false,
+  onResize: function onResize() {},
+  style: {}
+};
+
 module.exports = SizeMe;

dist/index.esm.js

@@ -0,3 +1,5 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
 import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
 import React from 'react';
+import elementResizeDetectorMaker from 'element-resize-detector';
 
@@ -17,6 +19,17 @@ var SizeMe =
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this._root = void 0;
+    _this._parentNode = void 0;
+    _this._elementResizeDetector = void 0;
     _this.state = {
-      width: null,
-      height: null
+      width: _this.props.defaultHeight || null,
+      height: _this.props.defaultHeight || null
     };
+
+    _this._resizeListener = function (element) {
+      _this.setState({
+        width: element.clientWidth,
+        height: element.clientHeight
+      });
+    };
+
     return _this;
@@ -28,11 +41,24 @@ }
   _proto.componentDidMount = function componentDidMount() {
-    console.log(this.root.parentNode);
-    this.setState({
-      width: this.root.parentNode.clientWidth,
-      height: this.root.parentNode.clientHeight
-    });
+    if (this._root && this._root.parentNode && this._root.parentNode instanceof this._root.parentNode.ownerDocument.defaultView.HTMLElement) {
+      this._parentNode = this._root.parentNode;
+      this._elementResizeDetector = elementResizeDetectorMaker({
+        strategy: 'scroll'
+      });
+
+      this._elementResizeDetector.listenTo(this._parentNode, this._resizeListener);
+    }
   };
 
-  _proto.renderContent = function renderContent() {
-    var children = this.props.children;
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this._elementResizeDetector && this._parentNode) {
+      this._elementResizeDetector.removeListener(this._parentNode, this._resizeListener);
+    }
+  };
+
+  _proto._renderContent = function _renderContent() {
+    var _this$props = this.props,
+        children = _this$props.children,
+        disableHeight = _this$props.disableHeight,
+        disableWidth = _this$props.disableWidth,
+        onResize = _this$props.onResize;
     var _this$state = this.state,
@@ -42,7 +68,17 @@ width = _this$state.width,
 
-    if (width !== null && typeof children === 'function') {
-      return children({
-        width: width,
-        height: height
-      });
+    if (typeof children === 'function') {
+      if (width !== null && height !== null) {
+        var params = {};
+
+        if (!disableHeight) {
+          params.height = height;
+        }
+
+        if (!disableWidth) {
+          params.width = width;
+        }
+
+        onResize(params);
+        return children(params);
+      }
     }
@@ -54,7 +90,13 @@ };
 
-    return React.createElement("span", {
+    var _this$props2 = this.props,
+        style = _this$props2.style,
+        className = _this$props2.className;
+    return React.createElement("span", _extends({
+      style: style,
+      className: className
+    }, {
       ref: function ref(i) {
-        return _this2.root = i;
+        return _this2._root = i;
       }
-    }, this.renderContent());
+    }), this._renderContent());
   };
@@ -65,2 +107,9 @@
 
+SizeMe.defaultProps = {
+  disableHeight: false,
+  disableWidth: false,
+  onResize: function onResize() {},
+  style: {}
+};
+
 export default SizeMe;

package.json

 {
     "name": "@avinlab/react-size-me",
-    "version": "1.0.0",
-    "description": "React components for determine container size",
+    "version": "1.1.0",
+    "description": "React components for determine parent container size",
     "author": "Avin Grape <[e-mail]> (https://github.com/avin/)",
@@ -10,3 +10,3 @@ "contributors": [
     "license": "MIT",
-    "homepage": "https://avin.github.io/react-size-me",
+    "homepage": "https://github.com/avin/react-size-me",
     "repository": {
@@ -32,3 +32,4 @@ "type": "git",
         "dist",
-        "src/*.js"
+        "src/*.js",
+        "README.md"
     ],
@@ -46,2 +47,3 @@ "scripts": {
         "prepare": "yarn run build",
+        "postpublish": "npm run deploy",
         "prettier": "prettier --write \"**/*.{js,json,css}\"",
@@ -63,2 +65,3 @@ "start": "rollup -c -w",
         "@babel/runtime": "^7.0.0",
+        "element-resize-detector": "^1.1.14",
         "memoize-one": "^3.1.1"
@@ -65,0 +68,0 @@ },

README.md

 # react-size-me
 
-> React components for determine container size
+> React components for determine parent container size
 
@@ -11,6 +11,6 @@ [![NPM registry](https://img.shields.io/npm/v/react-size-me.svg?style=for-the-badge)](https://yarnpkg.com/en/package/react-size-me) [![Travis](https://img.shields.io/badge/ci-travis-green.svg?style=for-the-badge)](https://travis-ci.org/bvaughn/react-size-me) [![NPM license](https://img.shields.io/badge/license-mit-red.svg?style=for-the-badge)](LICENSE)
 # Yarn
-yarn add react-size-me
+yarn add @avinlab/react-size-me
 
 # NPM
-npm install --save react-size-me
+npm install --save @avinlab/react-size-me
 ```
@@ -20,6 +20,18 @@
 
-...
+```js
+import React from 'react';
+import SizeMe from '@avinlab/react-size-me';
 
+<div className="container">
+    <SizeMe>
+        {({ width, height }) => (
+            <div className="inner" style={{ width, height }}/>                
+        )}
+    </SizeMe>
+</div>
+
+```
+
 ## License
 
 MIT © [avin](https://github.com/avin)

src/index.js

@@ -0,25 +1,128 @@
+//@flow
+
 import React from 'react';
+import elementResizeDetectorMaker from 'element-resize-detector';
 
-class SizeMe extends React.Component {
+type Size = {
+    height: ?number,
+    width: ?number,
+};
+
+type Props = {
+    /** Function responsible for rendering children.*/
+    //children: Size => React.Element<*>,
+    children: Size => React.Element<*>,
+
+    /** Optional custom CSS class name to attach to root AutoSizer element.  */
+    className?: string,
+
+    /** Default height to use for initial render; useful for SSR */
+    defaultHeight?: number,
+
+    /** Default width to use for initial render; useful for SSR */
+    defaultWidth?: number,
+
+    /** Disable dynamic :height property */
+    disableHeight: boolean,
+
+    /** Disable dynamic :width property */
+    disableWidth: boolean,
+
+    /** Nonce of the inlined stylesheet for Content Security Policy */
+    nonce?: string,
+
+    /** Callback to be invoked on-resize */
+    onResize: Size => void,
+
+    /** Optional inline style */
+    style: ?Object,
+};
+
+type ResizeHandler = (element: HTMLElement, onResize: (element: HTMLElement) => void) => void;
+
+type DetectElementResize = {
+    listenTo: ResizeHandler,
+    removeListener: ResizeHandler,
+};
+
+type State = {
+    height: ?number,
+    width: ?number,
+};
+
+class SizeMe extends React.Component<Props, State> {
+    static defaultProps = {
+        disableHeight: false,
+        disableWidth: false,
+        onResize: () => {},
+        style: {},
+    };
+
+    _root: ?HTMLElement;
+    _parentNode: ?HTMLElement;
+    _elementResizeDetector: DetectElementResize;
+
     state = {
-        width: null,
-        height: null,
+        width: this.props.defaultHeight || null,
+        height: this.props.defaultHeight || null,
     };
-    componentDidMount() {
-        console.log(this.root.parentNode);
+
+    _resizeListener = (element: HTMLElement) => {
         this.setState({
-            width: this.root.parentNode.clientWidth,
-            height: this.root.parentNode.clientHeight,
+            width: element.clientWidth,
+            height: element.clientHeight,
         });
+    };
+
+    componentDidMount() {
+        if (
+            this._root &&
+            this._root.parentNode &&
+            this._root.parentNode instanceof this._root.parentNode.ownerDocument.defaultView.HTMLElement
+        ) {
+            this._parentNode = this._root.parentNode;
+
+            this._elementResizeDetector = elementResizeDetectorMaker({
+                strategy: 'scroll',
+            });
+
+            this._elementResizeDetector.listenTo(this._parentNode, this._resizeListener);
+        }
     }
-    renderContent() {
-        const { children } = this.props;
+
+    componentWillUnmount() {
+        if (this._elementResizeDetector && this._parentNode) {
+            this._elementResizeDetector.removeListener(this._parentNode, this._resizeListener);
+        }
+    }
+
+    _renderContent() {
+        const { children, disableHeight, disableWidth, onResize } = this.props;
         const { width, height } = this.state;
 
-        if (width !== null && typeof children === 'function') {
-            return children({ width, height });
+        if (typeof children === 'function') {
+            if (width !== null && height !== null) {
+                const params = {};
+                if (!disableHeight) {
+                    params.height = height;
+                }
+                if (!disableWidth) {
+                    params.width = width;
+                }
+
+                onResize(params);
+
+                return children(params);
+            }
         }
     }
+
     render() {
-        return <span ref={i => (this.root = i)}>{this.renderContent()}</span>;
+        const { style, className } = this.props;
+
+        return (
+            <span {...{ style, className }} ref={i => (this._root = i)}>
+                {this._renderContent()}
+            </span>
+        );
     }
@@ -26,0 +129,0 @@ }

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

Total package byte prevSize

14580

increased by76.79%

Lines of code

284

increased by127.2%

Number of lines in readme file

36

increased by50%

Worsened metrics

Dependency count

6

increased by20%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedelement-resize-detector@^1.1.14

• + Addedbatch-processor@1.0.0(transitive)

• + Addedelement-resize-detector@1.2.4(transitive)