react-resizable-box - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

lib/index.js

@@ -182,8 +182,19 @@ 'use strict';
   }, {
+    key: 'getBoxStyle',
+    value: function getBoxStyle() {
+      var _this2 = this;
+
+      var getSize = function getSize(key) {
+        if (typeof _this2.state[key] === 'undefined') return 'auto';else if (/px$/.test(_this2.state[key].toString())) return _this2.state[key];else if (/%$/.test(_this2.state[key].toString())) return _this2.state[key];
+        return _this2.state[key] + 'px';
+      };
+      return {
+        width: getSize('width'),
+        height: getSize('height')
+      };
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var style = {
-        width: this.state.width ? this.state.width + 'px' : '100%',
-        height: this.state.height ? this.state.height + 'px' : '100%'
-      };
+      var style = this.getBoxStyle();
       var _props2 = this.props;
@@ -245,4 +256,4 @@ var isResizable = _props2.isResizable;
   customClass: _react.PropTypes.string,
-  width: _react.PropTypes.number,
-  height: _react.PropTypes.number,
+  width: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
+  height: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
   minWidth: _react.PropTypes.number,
@@ -249,0 +260,0 @@ minHeight: _react.PropTypes.number,

lib/resizer.js

@@ -38,2 +38,3 @@ 'use strict';
     bottom: '-5px',
+    left: 0,
     cursor: 'row-resize'
@@ -40,0 +41,0 @@ },

package.json

 {
   "name": "react-resizable-box",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -53,9 +53,13 @@ # react-resizable-box
 
-#### `width`: PropTypes.number
+#### `width`: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 
 The `width` property is used to set the width of a resizable component.
+Forexample, you can set `300`, `'300px'`, `50%`.
+If ommited, set `'auto'`.
 
-#### `height`: PropTypes.number
+#### `height`: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 
 The `height` property is used to set the width of a resizable component.
+Forexample, you can set `300`, `'300px'`, `50%`.
+If ommited, set `'auto'`.
 
@@ -151,2 +155,8 @@ #### `minWidth`: PropTypes.number
 
+## Changelog
+
+#### v0.4.0
+
+- Support `'px'` and `'%'` for width and height props.
+
 ## License
@@ -153,0 +163,0 @@

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

22878

increased by3.68%

Lines of code

329

increased by3.46%

Number of lines in readme file

171

increased by6.21%

No dependency changes